小相册

代码如下：

<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;//单位度数
        [].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>
小相册

相关

标签
