<!DOCTYPE HTML>

 <html onselectstart='return false'>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

         <meta name="keywords" content="" />

         <meta name="description" content="" />

         <title>3D拖拽效果</title>

         <style type="text/css">

             *{ margin:0; padding:0;}

             body{ background:#000; width:100%; height:100%; overflow:hidden}

             #wrap{ width:133px; height:200px; margin:200px auto 0;

                 position:relative;

                 transform-style:preserve-3d;

                 transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

                 }

             #wrap ul li{

                 list-style:none;

                 width:120px;

                 height:180px;

                 position:absolute;

                 top:0;left:0;

                 border-radius:3px;

                 box-shadow:0 0 10px #fff;

                 background-size:100%;

                 transform:rotateY(0deg) translateZ(0px);

                 -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);

             }

             #wrap p{ width:700px; height:700px; position:absolute; border-radius:100%;

                 left:50%; top:100%; margin-left:-350px; margin-top:-350px;

                 background:-webkit-radial-gradient(center,rgba(50,50,50,1),rgba(0,0,0,0));

                 transform:rotateX(90deg);}

         </style>

     </head>

     <body>

         <div id="wrap">

             <ul>

                 <li style="background-image:url(img/1.jpg);"></li>

                 <li style="background-image:url(img/2.jpg);"></li>

                 <li style="background-image:url(img/3.jpg);"></li>

                 <li style="background-image:url(img/4.jpg);"></li>

                 <li style="background-image:url(img/5.jpg);"></li>

                 <li style="background-image:url(img/6.jpg);"></li>

                 <li style="background-image:url(img/7.jpg);"></li>

                 <li style="background-image:url(img/8.jpg);"></li>

                 <li style="background-image:url(img/9.jpg);"></li>

                 <li style="background-image:url(img/10.jpg);"></li>

                 <li style="background-image:url(img/11.jpg);"></li>

             </ul>

             <p></p>

         </div>

         <script src="js/jquery-1.11.3.min.js"></script>

         <script>

         $(function(){

             var oL = $('#wrap ul li').size();

             var Deg = 360/oL;

             var xDeg = 0,yDeg = -10,xs,ys,p=null;

             for (var i=oL-1;i>=0;i--)

             {

                 $('#wrap ul li').eq(i).css({

                     transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",

                     'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'

                 });

             }

             $(document).mousedown(function(e){

                 clearInterval(p);

                 var x1 = e.clientX;

                 var y1 = e.clientY;

                 $(this).bind('mousemove',function(e){

                     xs = e.clientX - x1;

                     ys = e.clientY - y1;

                     x1 = e.clientX;

                     y1 = e.clientY;

                     xDeg += xs*0.3;

                     yDeg -= ys*0.1;

                     $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");

                 });

             }).mouseup(function(){

                 $(this).unbind('mousemove');

                 p = setInterval(function(){

                     if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};

                     xs = xs*0.95;

                     ys = ys*0.95

                     xDeg += xs*0.3;

                     yDeg -= ys*0.1;

                     $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");

                 },30);

             });

         });

         </script>

     </body>

 </html>

效果图：

JQ实现3D拖拽效果的更多相关文章

  1. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  5. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  7. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

  8. Swift2.0下UICollectionViews拖拽效果的实现

    文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...

  9. ExtJS拖拽效果

    ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...

随机推荐

  1. C#基础篇03

    1:不管是实参还是形参,都在内存中开辟空间. 2:写一个方法,它的功能一定要单一,方法中最忌讳的就是出现提示用户输入的字眼. 3:out参数 如果在一个方法中,返回多个类型相同的值时,可以考虑返回一个 ...

  2. 在Ubuntu Linux下安装Code::Blocks和Eclipse CDT

           最近小白由于有工作学习的需要,要尝试在Linux下进行C++编程.所以特地花了一点时间研究一下Linux下的C++的IDE.最后我尝试了使用Code::Blocks和Eclipse两个著 ...

  3. android NDK 笔记

    *************************************************华丽的分割线********************************************* ...

  4. java反射案例讲解

    本篇文章依旧采用小例子来说明,因为我始终觉的,案例驱动是最好的,要不然只看理论的话,看了也不懂,不过建议大家在看完文章之后,在回过头去看看理论,会有更好的理解. 下面开始正文. [案例1]通过一个对象 ...

  5. 【转】prototype扩展的JavaScript常用函数库

    Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> ...

  6. 免费的在线Web文件管理器:Net2FTP,Pydio,eXtplorer,KodExplorer–功能强大

    https://www.freehao123.com/web-ftp/ 经常有朋友在使用一些没有带文件管理器的空间时,苦于没有办法来解压上传的文件压缩包,而如果不先上传压缩包,直接上传文件夹的话耗费的 ...

  7. asp.net Hierarchical Data

    Introduction A Hierarchical Data is a data that is organized in a tree-like structure and structure ...

  8. 再议Unity 3D

    一年前,偶发冲动,翻译了<[译] Unity3D游戏和facebook绑定(1:简介)>系列文章. 现在看有2个明显的好处, 一:给这个不温不火的博客带了top 3的人气: 二:我个人由此 ...

  9. Java编程思想读书笔记--第14章类型信息

    7.动态代理 代理是基本的设计模式之一,它是你为了提供额外的或不同的操作,而插入的用来代替“实际”对象的对象.这些操作通常涉及与“实际”对象的通信,因此代理通常充当着中间人的角色. 什么是代理模式? ...

  10. There is no Action mapped for namespace [/] and action name [user] associated with context path

    从c++转到java,初学struts,竟然碰到一个因写错单词而造成的错误,structs --> struts