<!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{ 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; 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{ 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="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方向旋转。
