<!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小结

    一. 对与java读写文件的操作: 字节流: //filename  可以是文件名,可以是文件路径 FileOutputStream outputStream=new FileOutputStream ...

  2. HTML5规范的本地存储

    在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorag ...

  3. 读jQuery官方文档：$(document).ready()与避免冲突

    $(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...

  4. ASP伪静态页面(不需要通过iis+ISAPI_Rewrite)

    很简单的教程,献给喜欢SEO的朋友们. 不需要通过iis+ISAPI_Rewrite做基于IIS的url rewrite 一.数据库很简单使用ACCESS,Data.mdb建立一个表Article,三 ...

  5. war包编译和打包发布

    用IDE写一个基本的webApp 要学习java web技术,除了javaSE基本功之外,基础知识还有servlet技术.我们如果只用IDE的话,会把很多问题屏蔽掉,很多细节就想不清楚了.最好的方式, ...

  6. .bak文件在英文版的sqlserver2014如何生成和恢复

    生成bak备份文件 1.选择数据库 2.右击选择task 3.选择backup 4.

  7. sqlserver中的 数据转换 与 子查询

    数据类型转换 --cast转换 select CAST(1.23 as int) select CAST(1.2345 as decimal(18,2)) select CAST(123 as var ...

  8. linux时间无法同步的解决方案

    问题描述: 在家里的ubuntu和windows上始终无法同步时间,也参考了很多资料还是不行.无意中的一次把笔记本拿到公司,发现可以同步时间,但是就觉得奇怪了.对比之后才发现是移动的网络没法连接ntp ...

  9. SQL SERVER 级联删除

    有三个表: Company Address Contact 在Address和Contact中建立外键,外键id为company的id, 那么就不能任意删除Company.但假如在外键约束中把级联删除 ...

  10. Java使用Flying Saucer实现HTML代码生成PDF文档

    1.需要的jar包:org.xhtmlrenderer.flying-saucer-pdf-itext5,Maven依赖如下: <dependency> <groupId>or ...