360度拖拽图片

以你之姓@ 2023-10-17 19:11 51阅读 0赞

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style>  
body\{  
background-color:\#000;  
\}  
\*\{  
padding:0px;  
margin:0px;  
\}  
\#perspective\{  
perspective: 1000px; /\*设置视角距舞台的距离还可已设置是否透视，默认为否\*/  
\}  
\#wrap\{  
width:133px; /\*外包装\*/  
height:200px;  
position:relative;  
top:0;  
left:0;  
margin:50px auto;  
transform-style:preserve-3D;  
transform:rotateX(-10deg);  
\}  
\#wrap>img\{  
width:100%;  
height:100%;  
position:absolute;  
top:0px;  
left:0px;  
border-radius:6px;  
box-shadow:0px 0px 15px \#00FA9A;  
box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/\*倒影\*/  
\-webkit-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /\*倒影\*/  
\-moz-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /\*很遗憾，火狐不支持\*/  
cursor:pointer; /\*手型\*/  
\}  
</style>  
</head>  
<body>  
<div id="perspective">   
<div id="wrap">   
<img src="img/1.jpg"/>  
<img src="img/2.jpg"/>  
<img src="img/3.jpg"/>  
<img src="img/4.jpg"/>  
<img src="img/5.jpg"/>  
<img src="img/6.jpg"/>  
<img src="img/7.jpg"/>  
<img src="img/8.jpg"/>  
<img src="img/9.jpg"/>  
<img src="img/10.jpg"/>  
<img src="img/11.jpg"/>  
</div>  
</div>  
<script>  
window.οnlοad=function()\{  
var wrapDom = document.querySelector("\#wrap"); //获取wrap  
var imgDom = document.getElementsByTagName("img");//获取wrapimg  
var wrap = document.getElementById('wrap');  
var len = imgDom.length;//获取img的长度  
var imgDeg = 360/len; //平分360度  
for(var i=0;i<len;i++)\{  
// imgDom\[i\].style.transform="rotateY("+i\*imgDeg+"deg)translateZ(350px)";  
// // imgDom\[i\].style.transition="transform 1s"+(len-1-i)\*0.2+"s";  
// imgDom\[i\].styletransition="transform 1s"+(len-1-i)\*.2+"s";  
//分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置)  
imgDom\[i\].style.transform= "rotateY("+i\*imgDeg+"deg) translateZ(350px)";  
imgDom\[i\].style.transition ="transform 1s "+(len-1-i)\*0.2+"s";  
\}  
  
var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10;roY=0; //初始化新旧鼠标坐标 每次改变坐标大小 和rotateX和rotateY初始值  
  
// var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10;roY=0;  
  
center(); //执行函数  
window.onresize =center;//当缩放窗口时调用函数  
function center()\{ // 垂直居中啊  
var mt = window.innerHeight/2-wrapDom.offsetHeight; //获取窗口高度除以二再减去容器高度=容器顶距窗口顶的距离  
wrapDom.style.cssText = "margin-top:"+mt+"px";  
\}  
  
setTimeout(function()\{  
wrap.style.backgroundImage = "url(./img/11.jpg)";  
\},2000)  
  
  
document.οnmοusedοwn=function(e)\{  
clearInterval(timer)  
var timer = null;  
var ev = e||window.event;//兼容事件  
lastx = ev.clientX; //当前鼠标位置  
lasty = ev.clientY;  
this.οnmοusemοve=function(e)\{  
clearInterval(timer)  
var ev = e||window.event;  
var nowx = ev.clientX; //现在鼠标位置  
var nowy = ev.clientY;  
changeX=nowx-lastx; //x轴变化了多少  
changeY=nowy-lasty; //y轴变化了多少  
roY+=changeX\*0.1; //调节转的速度  
roX+=changeY\*0.1; //调节转的速度  
  
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"; //赋值新的rotateX和rotateY  
lastx=nowx; //将旧的数据更新  
lasty=nowy; //将旧的数据更新  
\}  
this.οnmοuseup=function()\{  
this.onmousemove = null; //取消移动事件  
timer=setInterval(function()\{ //设定时器逐渐减小rotateX和rotateY  
changeX\*=0.95; //每30毫秒rotateX减少5%  
changeY\*=0.95; //每30毫秒rotateY减少5%  
roY+=changeX\*0.2; //调节转的速度  
roX+=changeY\*0.2; //调节转的速度  
wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";//赋值新的rotateX和rotateY  
  
\},30)  
\}  
return false; //取消默认事件  
  
\}  
  
  
  
  
  
  
  
\}  
</script>  
</body>  
</html>