图片环HTML5+CSS3
2016-12-03 本文已影响0人
函数function
图片环.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>李立昌 http://www.jianshu.com/users/b1e8423ae7e2/latest_articles</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body,html{ overflow: hidden;}
body{
background: #000;
}
ul{
width:133px;
height:200px;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-10deg);
position: absolute;
left:50%;
top:50%;
margin-left:-67px;
margin-top:-150px;
}
ul li{
width:133px;
height:200px;
background: url("img2/1.jpg");
border-radius: 8px;
transition: 1s all ease;
transform: rotateY(0deg) translateZ(0px);
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
-webkit-box-shadow:0 0 12px #fff;
position: absolute;
}
ul:active li{
/*transform:rotateY(60deg) translateZ(300px);*/
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl = document.getElementById('ul1');
var N = 11;
//布局
for(var i = 0;i<N;i++){
var oLi = document.createElement('li');
oLi.style.backgroundImage = 'url(img2/'+(i+1)+'.jpg)';
oUl.appendChild(oLi);
(function(oLi,i){
setTimeout(function(){
oLi.style.transform = 'rotateY('+(360/N*i)+'deg) translateZ(300px)';
oLi.style.transition = '1s all ease '+(N-i)*200+'ms';
},0);
})(oLi,i);
}
var aLi = oUl.children;
//鼠标控制
var y = 0;
document.onmousedown = function(ev){
var oEvent = ev||event;
var disX = oEvent.clientX - y;
document.onmousemove = function(ev){
var oEvent = ev||event;
y = oEvent.clientX - disX;
change(aLi,y/3);
};
document.onmouseup = function(ev){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
function change(aLi,y){
for(var i = 0;i<aLi.length;i++){
aLi[i].style.transition = 'none';
}
for(var i = 0;i<aLi.length;i++){
aLi[i].style.transform = 'rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
// aLi[i].style.transition = '1s all ease';
}
}
},false);
</script>
</head>
<body>
<ul id="ul1">
</ul>
</body>
</html>
