360度拖拽图片

最新推荐文章于 2020-12-01 04:58:34 发布

盏茶作酒

最新推荐文章于 2020-12-01 04:58:34 发布

阅读量314

点赞数

分类专栏： 360度拖拽图片文章标签： 360度拖拽图片

本文链接：https://blog.csdn.net/qq_40999917/article/details/79970274

版权

360度拖拽图片专栏收录该内容

1 篇文章 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>

盏茶作酒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
360度拖拽图片

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{ background-c
复制链接

扫一扫

专栏目录