Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
433 lines (399 sloc) 14.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body,html{
font-size: 14px;
height: 100%;
}
.wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
perspective: 1800px;
}
.photo {
width: 260px;
height: 320px;
position: absolute;
z-index: 1;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
transition: all 0.5s;
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
}
.photo .side {
width: 100%;
height: 100%;
background: #eee;
position: absolute;
right: 0;
top: 0;
padding: 20px;
box-sizing: border-box;
backface-visibility: hidden;
}
.photo .side-front {
transform: rotateY(0deg);
}
.photo .side-front .imgs {
width: 100%;
height: 250px;
line-height: 250px;
overflow: hidden;
}
.photo .side-front .imgs img {
width: 100%;
}
.photo .side-front .caption {
text-align: center;
font-size: 16px;
line-height: 50px;
}
.side-back {
transform: rotateY(180deg);
}
.side-back .desc {
color: #666;
line-height: 1.5em;
font-size: 14px;
}
/*当前海报选中样式*/
.photo-center {
left: 50%;
top: 50%;
margin: -160px 0 0 -130px;
z-index: 999;
}
.photo-wrap {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 0.5s;
transform-origin: 0;
}
.photo-front .photo-wrap {
transform: rotateY(0deg) translate(0px, 0px);
}
.photo-back .photo-wrap {
transform: rotateY(180deg) translate(-260px, 0px);
}
.nav {
width: 80%;
height: 30px;
line-height: 30px;
position: absolute;
left: 10%;
bottom: 20px;
z-index: 10000;
background: #fff;
text-align: center;
}
.i {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #aaa;
cursor: pointer;
transform: scale(0.5);
}
.nav .i_current {
transform: scale(1);
background: #000;
}
.nav .i_back {
transform: scale(1);
background: #0E8EE7;
}
.btnbox {
position: absolute;
left: 20px;
top: 10px;
z-index: 10000;
}
.btnbox button {
width: 100px;
height: 40px;
font-size: 16px;
background: #fff;
border: none;
outline: none;
color: #0E8EE7;
cursor: pointer;
border-radius: 4px;
}
.btnbox button.show {
color: #fff;
background: #0E8EE7;
}
.pox {
height: 40px;
font-size: 16px;
background: #fff;
margin-top: 10px;
line-height: 40px;
border-radius: 4px;
position: relative;
}
.pox label {
margin-left: 20px;
}
.pox input[type="range"] {
position: absolute;
right: 5px;
top: 10px;
}
</style>
</head>
<body>
<div class="btnbox">
<button class="show btn">散列</button>
<button class="btn">横环装</button>
<button class="btn">竖环装</button>
<div class="pox">
<label for="change">自动播放:</label>
<input id="change" type="checkbox" /> &nbsp;速度:
<input type="range" value="4" max="10" min="1" id="speed" value="1">
</div>
</div>
<div class="wrap" id="wrap">
</div>
<script type="text/javascript">
function data() {
var data = [];
for (var i = 1; i < 41; i++) {
data.push({
img: 'http://xuxin123.com/code/waterfall/images/' + i + '.jpg',
caption: '' + texthan(i) + '',
desc: '描述' + texthan(i)
});
};
return data;
};
function texthan(n) {
var han = ['', '', '', '', '', '', '', '', '', ''];
if (n > 10) {
var s = Math.floor(n / 10) > 1 ? han[Math.floor(n / 10) - 1]+'' : '';
var g = n % 10 - 1 >= 0 ? han[n % 10 - 1] : '';
return s + g;
} else {
return han[n - 1];
}
}
function Surround(option) {
option = option || {};
this.activeindex = option.activeindex || 0;
this.state = option.state || 0;
}
Surround.prototype = {
getdom: function (obj) {
var method = obj.substr(0, 1) == '.' ? 'getElementsByClassName' : 'getElementById';
return document[method](obj.substr(1));
},
getwh: function (obj) {
return {
w: obj.clientWidth,
h: obj.clientHeight
}
},
select: function (start, end) {
var num = end - start + 1;
return Math.floor(Math.random() * num + start);
},
rsort: function (n) {
var _photo = this.getdom('.photo');
var wrap = this.getwh(this.getdom('#wrap'));
var photo = this.getwh(this.getdom('.photo')[0]);
var photos = []
for (var i = 0; i < _photo.length; i++) {
_photo[i].className = 'photo photo-front';
_photo[i].style.left = '';
_photo[i].style.top = '';
_photo[i].style['transform'] = 'rotate(0deg) scale(1.3)';
photos.push(_photo[i]);
};
var photo_center = this.getdom('#photo_' + n);
photo_center.className += ' photo-center';
photo_center = photos.splice(n, 1)[0];
if (this.state === 0) {
this.separate(photos,function(photo){
photo.style.left = this.range().left.x + 'px';
photo.style.top = this.range().left.y + 'px';
photo.style['transform'] = 'rotate(' + this.select(-90, 90) + 'deg) scale(1)';
},function(photo){
photo.style.left = this.range().right.x + 'px';
photo.style.top = this.range().right.y + 'px';
photo.style['transform'] = 'rotate(' + this.select(-90, 90) + 'deg) scale(1)';
});
} else if (this.state === 1) {
for(var s in photos){
photos[s].style['transform'] = 'rotate(' + this.select(0, 360) +
'deg) scale(1) translate(500px)';
};
} else {
var r = 460;
for (var s = 0; s < photos.length; s++) {
var deg = this.select(0, 360);
var sinY = Math.sin(deg * Math.PI / 180) * r;
var cosX = Math.cos(deg * Math.PI / 180) * r;
photos[s].style.top = ((wrap.h / 2) + sinY) + 'px';
photos[s].style.left = ((wrap.w / 2) + cosX) + 'px';
photos[s].style.transform = 'rotate(' + (deg + 90) + 'deg)'
};
};
var navs = this.getdom('.i');
for (var i = 0; i < navs.length; i++) {
navs[i].className = 'i';
}
this.getdom("#nav_" + n).className += ' i_current';
},
separate:function(photos,lfn,rfn){
var photos_left = photos.splice(0, Math.ceil(photos.length / 2));
var photos_right = photos;
for(s in photos_left){
var photo = photos_left[s];
lfn.apply(this,[photo]);
}
for(s in photos_right){
var photo = photos_right[s];
rfn.apply(this,[photo]);
}
},
turn: function (elem) {
var cls = elem.className;
var n = elem.id.split('_')[1];
this.activeindex = Number(n);
if (!elem.classList.contains("photo-center")) {
return this.rsort(n);
}
if (elem.classList.contains('photo-front')) {
cls = cls.replace(/photo-front/, "photo-back");
this.getdom("#nav_" + n).classList.add('i_back');
} else {
cls = cls.replace(/photo-back/, "photo-front");
this.getdom("#nav_" + n).classList.remove('i_back');
};
return elem.className = cls;
},
range: function () {
var range = {
left: {
x: [],
y: []
},
right: {
x: [],
y: []
}
};
var wrap = this.getwh(this.getdom('#wrap'));
var photo = this.getwh(this.getdom('.photo')[0]);
range.left.x = this.select(-photo.w, (wrap.w - photo.w) / 2);
range.left.y = this.select(-photo.h, wrap.h);
range.right.x = this.select((wrap.w - photo.w) / 2, wrap.w);
range.right.y = this.select(-photo.h, wrap.h);
return range;
},
time:function(data) {
if (this.activeindex > data.length - 1) {
this.activeindex = 0;
};
this.rsort(this.activeindex);
this.activeindex++;
},
addPhotos: function (data) {
var lists = '';
var nav = '';
var navbox = document.createElement('div');
navbox.className = 'nav';
for (var i in data) {
var photobox =
`<div class="photo photo-front" id="photo_${i}">
<div class="photo-wrap">
<div class="side side-front">
<p class="imgs">
<img src="${data[i].img}" />
</p>
<p class="caption">${data[i].caption}</p>
</div>
<div class="side side-back">
<p class="desc">
${data[i].desc}
</p>
</div>
</div>
</div>`;
var navitem = `<span id="nav_${i}" class="i"></span>`
nav += navitem;
lists += photobox;
}
navbox.innerHTML = nav;
this.getdom('#wrap').innerHTML = lists;
this.getdom("#wrap").append(navbox);
var i = this.getdom(".nav")[0].getElementsByClassName('i');
var photo = this.getdom(".photo");
[].slice.call(i).forEach(function(el,index) {
el.onclick = function(){
this.turn(this.getdom('#photo_'+index));
}.bind(this);
},this);
[].slice.call(photo).forEach(function(el,index){
el.onclick = function(event){
this.turn(event.currentTarget);
}.bind(this);
},this);
this.rsort(this.activeindex);
}
}
var surround = new Surround();
surround.addPhotos(data());
surround.getdom("#change").onchange = function () {
if (this.checked) {
var speed =surround.getdom('#speed').value;
surround.getdom('#speed').onchange = function () {
speed = this.value;
clearInterval(timer);
timer = setInterval(function(){
surround.time(data());
}, speed * 500);
};
timer = setInterval(function(){
surround.time(data());
}, speed * 500);
} else {
clearInterval(timer);
};
};
btn();
function btn() {
for (var i = 0; i < surround.getdom('.btn').length; i++) {
(function (i) {
surround.getdom(".btn")[i].onclick = function () {
for (var j = 0; j < surround.getdom('.btn').length; j++) {
surround.getdom(".btn")[j].className = 'btn';
};
surround.getdom(".btn")[i].className = 'btn show';
surround.state = i;
surround.rsort(surround.activeindex);
};
})(i);
}
};
</script>
</body>
</html>
You can’t perform that action at this time.