javascript加CSS3做不一樣的3D拖拽照片牆

標籤：javascript   css3   3D   

知識點：CSS33D效果,CSS3過度，原生JavaScript拖拽模組開發，動態style樣式，力學類比演算法，event對象詳解，js邏輯思維與編程思想。

html代碼：

    <div class=‘perspective‘>        <div class=‘wrap‘>            <img src=‘images/1.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/2.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/3.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/4.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/5.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/6.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/7.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/8.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/9.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/10.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <img src=‘images/11.jpg‘ width=‘133‘ height=‘200‘ alt=‘#‘>            <p></p>        </div>    </div>

css代碼：

  <style>     *{margin:0;padding:0}      body{        background:#222;        overflow:hidden;        user-select:none;  /*禁止選中*/      }    .perspective{        perspective:800px;  /*3d景深*/    }    .wrap{        transform-style:preserve-3d;        width:120px;        height:180px;        margin:100px auto;        position:relative;        transform:rotateX(-10deg) rotateY(0deg);    }    .wrap img{        display:block;        position:absolute;        width:100%;        height:100%;        transform: rotateY(0deg) translateZ(0px);        padding:10px;        background:transparent;        box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 擴散程度 顏色*/        border-radius:5px;        /*圓角*/        -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直徑*/    }    .wrap p{        width:1200px;        height:1200px;        background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));        position:absolute;        border-radius:50%;        left:50%;        top:100%;        margin-left:-600px;        margin-top:-600px;        transform:rotateX(90deg); /*沿著x軸方向摁倒*/    }  </style>

javascript代碼：

    <script>            /*誰 觸發了什麼事件 誰做了什麼*/            window.onload=function(){  /*頁面載入完成*/            /*最新的原生擷取元素方法querySelectorAll*/                var oImg=document.querySelectorAll(‘img‘);                 var oWrap=document.querySelector(‘.wrap‘);                var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;                var timer=null;            /*計算每一個圖片的角度 總角度(360) / 數量(11) = 單位角度*/                var length=oImg.length;  /*擷取img的數量 統稱為長度*/                var Deg=360/length;      /*單位角度*/                for(var i=0;i<length;i++){                   oImg[i].style.transform=‘rotateY(‘+ i*Deg +‘deg) translateZ(350px)‘;                   oImg[i].style.transition=‘transform 1s ‘+(length-1-i)*0.2+‘s‘                }                mTop();                window.onresize=mTop;                function mTop(){                     /*擷取瀏覽器視窗可視高度*/                    var wH=document.documentElement.clientHeight||document.body.clientHeight;                    oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight+‘px‘;                }                /*拖拽drag 按下 onmousedown 移動 onmousemove 抬起 onmouseup */                document.onmousedown=function(event){ /*按下滑鼠開始準備拖拽*/                    event=event||window.event;          /*處理相容性*/                    lastX=event.clientX;                /*滑鼠拖拽開始時的x座標*/                    lastY=event.clientY;                /*滑鼠拖拽開始時的Y座標*/                    clearInterval(timer);                    document.onmousemove=function(event){                        event=event||window.event;                          nowX=event.clientX;             /*滑鼠移動時的x座標*/                        nowY=event.clientY;             /*滑鼠移動時的y座標*/                        minusX=nowX-lastX;              /*擷取滑鼠移動距離*/                        minusY=nowY-lastY;              /*擷取滑鼠移動距離*/                        roY+=minusX*0.2;                /*通過移動量計算旋轉角度*/                        roX-=minusY*0.1;                /*通過移動量計算旋轉角度*/                        oWrap.style.transform=‘rotateX(‘+roX+‘deg) rotateY(‘+roY+‘deg)‘                         lastX=nowX;                     /*更新初始位置保證 lastX 跟得上滑鼠*/                        lastY=nowY;                     /*更新初始位置保證 lastY  */                    }                    document.onmouseup=function(){                        document.onmousemove=null;                        timer=setInterval(function(){                            /*給一個摩擦係數,每一次定時器觸發都慢一點點*/                            minusX*=0.9;                                                 minusY*=0.9;                            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);                                }                        },13);                    }                    return false;                }            }    </script>

有興趣想學習web前端的可以來web前端qun“189394454”可以免費擷取2018最新web前端學習資料。

javascript加CSS3做不一樣的3D拖拽照片牆