<!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. Android之HTTP网络通信--GET传递(二)

    根据上一篇写的是实现了通过url接口将接口中的数据显示出来,这次根据上一篇的基础,进一步说明一下AsynTask的使用. AsynTask类有几个函数是大家必须知道的. doInBackGround( ...

  2. 你真的会用UIButton吗? UIButton详细介绍

    本节知识点: 什么是UIButton UIButton的状态 UIButton的属性设置 UIButton基本使用步骤 UIButton的代码创建与常用属性设置 重写按钮的某个状态属性的 setter ...

  3. Android_listView_BaseAdapter_downLoadImg

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  4. Java 8 Date Time API Example Tutorial – LocalDate, Instant, LocalDateTime, Parse and Format

    参考 Java 8 Date and Time API is one of the most sought after change for developers. Java has been mis ...

  5. About Webkit

    http://blog.csdn.net/spacetiller/article/details/5784461 一 . WebKit 简介 Webkit 是一个开放源代码的浏览器引擎 (web br ...

  6. fedora 23中配置nfs-server

    fedora 23中配置nfs-server */--> fedora 23中配置nfs-server Table of Contents 1. 产考资料 2. NFS配置文件 2.1. /et ...

  7. 最大公约数与欧几里得(Euclid)算法

    ---恢复内容开始--- 记a, b的最大公约数为gcd(a, b).显然, gcd(a,b)=gcd(|a|,|b|). 计算最大公约数的Euclid算法基于下面定理: [GCD递归定理]对于任意非 ...

  8. Orchard 学习-安装Orchard

    前段时间使用一个ABP的框架进行了一个简单CMS开发.但感觉自己开发CMS不够灵活和通用,所以还是学习一下Orchard.学习的第一步,阅读官方的文档.由于是英文,所以我对其进行了翻译和记录,方便自己 ...

  9. asp图片化电话号码，避免蜘蛛之类爬走用户隐私

    作用:将页面中的电话号码生成图片格式.挺多的分类信息类网站使用这个功能.不用真正的生成图片.原理类似验证码,挺不错的. <% Call Com_CreatValidCode(Request.Qu ...

  10. Android线控的使用

    实现方式一:只能在程序为前台时监控 在Activity中即可监听 @Override public boolean onKeyUp(int keyCode, KeyEvent event) { Log ...