<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background:#1e1e1f;
overflow:hidden;
}
.box{
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg);
}
.box img{
width: 300px;
height: 200px;
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 100px);
border: 5px solid #ffffff;
user-select: none;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
}
#wrap p{
width: 1200px;
height: 1200px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(244,23,234,0.2),rgba(0,0,0,0));
position: absolute;
top:100%;left:50%;
margin-top: -600px;
margin-left: -600px;
border-radius:600px;
transform:rotateX(90deg);
}
</style>
</head>
<body >
<div class="box" id="wrap">
<img src="C:/Users/18201/Desktop/img/1.jpg" />
<img src="C:/Users/18201/Desktop/img/2.jpg" />
<img src="C:/Users/18201/Desktop/img/3.jpg" />
<img src="C:/Users/18201/Desktop/img/1.jpg" />
<img src="C:/Users/18201/Desktop/img/2.jpg" />
<img src="C:/Users/18201/Desktop/img/3.jpg" />
<p></P>
</div>
</body>
<script>
setTimeout(init,100);
function init(){
var imgArray = document.getElementsByTagName('img');
var deg = 360/imgArray.length;//单位度数
[].forEach.call(imgArray,function(node,index){
// console.log(index*deg);//每张图片应该旋转的度数
node.style.transform = "rotateY("+index*deg+"deg)translatez(350px)";//赋予给图片，并撑开350px
node.style.transition = "1s "+(imgArray.length - index)*0.11+"s";
});
var newX,newY,pervX,pervY,minusX,minusY;
var roY = 0 , roX = -10;
var oWrap = document.getElementById("wrap");//通过id获取元素
var timer;
// 拖拽：三个事件-按下 移动 抬起
//按下
document.onmousedown = function(ev){
ev = ev || window.event;
//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
lastX = ev.clientX;
lastY = ev.clientY;
//移动
this.onmousemove = function(ev){
ev = ev || window.event;
clearInterval( timer );
nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
nowY = ev.clientY; // clientY ………………………………顶部………………
//当前坐标和前一点坐标差值
minusX = nowX - lastX;
minusY = nowY - lastY;
//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
roY += minusX*0.2; // roY = roY + minusX*0.2;
roX -= minusY*0.1;
oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
/*
//生成div，让div跟着鼠标动
var oDiv = document.createElement('div');
oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
this.body.appendChild(oDiv);
*/
//前一点的坐标
lastX = nowX;
lastY = nowY;
}
//抬起
this.onmouseup = function(){
this.onmousemove = null;
timer = setInterval(function(){
minusX *= 0.95;
minusY *= 0.95;
roY += minusX*0.2; // roY = roY + minusX*0.2;
roX -= minusY*0.1;
oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';
if ( Math.abs(minusX)<0.1 && Math.abs( minusY )<0.1 )
{
clearInterval( timer );
}
console.log( minusX );
},13);
}
return false;
}
};
</script>
3170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
