<!DOCTYPE html> <html onselectstart="return false"> <!-- onselectstart="return false" 禁止頁面復制--> <head lang="en"> /*onselectstart="return false"*/ <meta charset="UTF-8"> <title>document</title> <!--一共用的就是40到50個單詞記住即可--> <!-- div.pic 是創建一個盒子--> <style> *{ margin: 0; padding: 0; } body{ background-color: #000; } div.pic{ width: 120px; height: 180px; /* 133:200 約等於 4:6 */ /*border: 1px dotted #f00;*/ margin: 200px auto 0;/*上---左右---下 */ position: relative; transform-style: preserve-3d; transform: perspective(800px) rotateX(-10deg) rotateY(0deg); } div.pic img{ position: absolute; width: 100%; height: 100%; border-radius: 5px; /*加上圓角*/ box-shadow: 0px 0px 10px #fff;/*box-shadow 屬性向框添加一個或多個陰影*/ -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /*box-reflect倒影屬性練習*/ /*-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1) , 這是一個漸變*/ } div.pic p{ width: 1200px; height: 1200px; background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,0.3),rgba(0,0,0,0)); left: 50%;top: 100%; margin-top: -50px; margin-left: -600px; transform: rotateX(90deg); border-radius: 600px; } </style> </head> <body> <!--div 長方型的區域--> <div class="pic"> <img src="img/1.jpg" alt="1.jpg"/> <img src="img/2.jpg" alt="2.jpg"/> <img src="img/3.jpg" alt="3.jpg"/> <img src="img/4.jpg" alt="4.jpg"/> <img src="img/5.jpg" alt="5.jpg"/> <img src="img/6.jpg" alt="6.jpg"/> <img src="img/7.jpg" alt="7.jpg"/> <img src="img/8.jpg" alt="8.jpg"/> <img src="img/9.jpg" alt="9.jpg"/> <img src="img/10.jpg" alt="10.jpg"/> <img src="img/11.jpg" alt="11.jpg"/> <p></p> </div> <script src="js/jquery-2.1.1.min.js"></script> <script> $(function(){ //設定初始變化值 var translate=800; //文檔添加鼠標滾輪事件，demo沒寫兼容，不支持火狐 document.addEventListener("mousewheel",function(e){ //縮放 var distance=50 //每次滾輪縮放變化值 if(e.wheelDelta>0){ //方向 clearInterval(play) translate+=distance //perspective值變化 $("div.pic").css({ transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)' }); //css3變化 }else if(e.wheelDelta<0){ clearInterval(play) translate-=distance $("div.pic").css({ transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)' }); } }) var imgL = $("div.pic img").size(); //img數量 // alert(imgL); var deg = 360 / imgL; //角度 var toY = 0, toX = -10; var xN = 0,yN = 0; var play = null; $("div.pic img").each(function(i){ $(this).css({ 'transform':'rotateY('+i*deg+'deg) translateZ(350px)' //css設置，分別設定變化角度，同樣的z軸變化，形成一個圓 }); $(this).attr("ondragstart","return false"); /*瀏覽器禁止拖拽功能*/ }); $(document).mousedown(function(ev){ /*console.log("shu biao an xia le !");*/ var x_ = ev.clientX; var y_ = ev.clientY; clearInterval(play); $(this).bind("mousemove",(function(ev){ /* console.log('yi dong !');*/ var x = ev.clientX; var y = ev.clientY; xN = x - x_; yN = y - y_; toY += xN*0.2; toX -= yN*0.1; //$("body").append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:"+y+"px;left:"+x+"px;"></div>')/*打點計數器*/ $("div.pic").css({ transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)' }); x_ = ev.clientX; y_ = ev.clientY; })); }).mouseup(function(){ $(this).unbind("mousemove"); var play = setInterval(function(){ xN *= 0.95; yN *= 0.95; if ( Math.abs(xN) < 1 && Math.abs(yN) < 1 )/*Math絕對值*/clearInterval(play); toY += xN*0.2; toX -= yN*0.1; $("div.pic").css({ transform:'perspective('+translate+'px) rotateX('+toX+'deg) rotateY('+toY+'deg)' }); },30); //return play }); }); </script> </body> </html>
借用的網絡分享的一個demo，在上面添加了鼠標滾輪放大縮小（沒有寫兼容，火狐不支持）效果。
有幾個知識點記錄下：
1.鼠標滾輪事件
在jquery中沒有滾輪事件，所以需要我們自己去碼
其中ie，chorme，safri中事件為mouseWheel，火狐為DOMMouseScroll，判斷滾動方向也不一樣，前4者為wheelDelta，后者為detail.detail與wheelDelta只各取兩個 值，detail只取±3，wheelDelta只取±120。
2.perspective
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
perspective屬性設置鏡頭到元素平面的距離。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，鏡頭距離元素表面的位置是300像素。值越小，用戶與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就很小。
3.rotateY
rotateX()、rotateY()和rotateZ()分別為沿X，Y，Z方向旋轉。
