键盘和鼠标控制的图片环
2016-12-04 本文已影响0人
itdingrui
控制图片换有两种方法，分别是键盘和鼠标。
倒影控制-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));其中图片倒影分上下左右，below是倒影在图片下方 10px是距离图片10成倒影
3d成立体图transform-style:preserve-3d;注意只能定在父级
图片初始向下transform:perspective(800px) rotateX(-10deg);
思路：定义多少的图片N,for循环定义图片背景，图片定义一段时间出来timeout设定运动，键盘keydown控制下定义转的角度y，循环定义分别运动距离和角度。
键盘控制图片环：
*{
margin:0;
padding:0;
list-style:none;
}
body,html{
background:#000;
overflow:hidden;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg);
}
li{
width:133px;
height:200px;
border-radius:8px;
background:url("img2/1.jpg") no-repeat;
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 16px #fff;
position:absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#ul1');
var N=11;
for(var i=0;i<N;i++){
var aLi=document.createElement('li');
aLi.style.backgroundImage='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(aLi);
(function(aLi,i){
setTimeout(function(){
aLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';
aLi.style.transition='1s all ease '+(N-i)*200+'ms';
},0)
})(aLi,i);
}
//键盘控制
var aL=oUl.children;
var y=0;
document.onkeydown=function(ev){
var oEvent=ev||event;
if(oEvent.keyCode==37){
y-=360/N;
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='1s all ease';
}
}else{
y+=360/N;
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='1s all ease';
}
}
};
},false);
</script>
<body>
<ul id="ul1"></ul>
</body>
鼠标移动拖动图片环
*{
margin:0;
padding:0;
list-style:none;
}
body,html{
background:#000;
overflow:hidden;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -67px;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg);
}
li{
width:133px;
height:200px;
border-radius:8px;
background:url("img2/1.jpg") no-repeat;
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 16px #fff;
position:absolute;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#ul1');
var N=11;
for(var i=0;i<N;i++){
var aLi=document.createElement('li');
aLi.style.backgroundImage='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(aLi);
(function(aLi,i){
setTimeout(function(){
aLi.style.transform='rotateY('+360/N*i+'deg) translateZ(300px)';
aLi.style.transition='1s all ease '+(N-i)*200+'ms';
},0)
})(aLi,i);
}
//鼠标控制
var aL=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(aL,y/3);
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
function change(aL,y){
for(var i=0;i<aL.length;i++){
aL[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
aL[i].style.transition='none';
}
}
},false);
</script>
<body>
<ul id="ul1"></ul>
</body>
