liuun

干就完啦

小相冊(cè)

代碼如下：

<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="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" />
      <p></P>
   </div>

</body>
<script>
   
   setTimeout(init,100);
   function init(){
      var imgArray = document.getElementsByTagName('img');
        var deg = 360/imgArray.length;//單位度數(shù)
        [].forEach.call(imgArray,function(node,index){
            // console.log(index*deg);//每張圖片應(yīng)該旋轉(zhuǎn)的度數(shù)
            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;
        // 拖拽：三個(gè)事件-按下 移動(dòng) 抬起
        //按下
        document.onmousedown = function(ev){
            ev = ev || window.event;

            //鼠標(biāo)按下的時(shí)候，給前一點(diǎn)坐標(biāo)賦值，為了避免第一次相減的時(shí)候出錯(cuò)
            lastX = ev.clientX;
            lastY = ev.clientY;

            //移動(dòng)
            this.onmousemove = function(ev){
                ev = ev || window.event;

                clearInterval( timer );

                nowX = ev.clientX; // clientX 鼠標(biāo)距離頁(yè)面左邊的距離
                nowY = ev.clientY; // clientY ………………………………頂部………………

                //當(dāng)前坐標(biāo)和前一點(diǎn)坐標(biāo)差值
                minusX = nowX - lastX;
                minusY = nowY - lastY;

                //更新wrap的旋轉(zhuǎn)角度，拖拽越快-> minus變化大 -> roY變化大 -> 旋轉(zhuǎn)快
                roY += minusX*0.2; // roY = roY + minusX*0.2;
                roX -= minusY*0.1;

                oWrap.style.transform = 'rotateX('+ roX +'deg) rotateY('+ roY +'deg)';

                /*
                //生成div，讓div跟著鼠標(biāo)動(dòng)
                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);
                */

                //前一點(diǎn)的坐標(biāo)
                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>
posted @ 2020-11-23 21:03 liuun 閱讀(118) 評(píng)論(0) 收藏舉報(bào)
刷新頁(yè)面返回頂部
liuun

干就完啦

小相冊(cè)

公告
