1.  <!DOCTYPE HTML>
  2.  <html onselectstart='return false'>
  3.      <head>
  4.          <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  5.          <meta name="keywords" content="" />
  6.          <meta name="description" content="" />
  7.          <title>3D拖拽效果</title>
  8.          <style type="text/css">
  9.              *{ margin:0; padding:0;}
  10.              body{ background:#000; width:100%; height:100%; overflow:hidden}
  11.              #wrap{ width:133px; height:200px; margin:200px auto 0;
  12.                  position:relative;
  13.                  transform-style:preserve-3d;
  14.                  transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
  15.                  }
  16.              #wrap ul li{
  17.                  list-style:none;
  18.                  width:120px;
  19.                  height:180px;
  20.                  position:absolute;
  21.                  top:0;left:0;
  22.                  border-radius:3px;
  23.                  box-shadow:0 0 10px #fff;
  24.                  background-size:100%;
  25.  
  26.                  transform:rotateY(0deg) translateZ(0px);
  27.                  -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
  28.              }
  29.              #wrap p{ width:700px; height:700px; position:absolute; border-radius:100%;
  30.                  left:50%; top:100%; margin-left:-350px; margin-top:-350px;
  31.                  background:-webkit-radial-gradient(center,rgba(50,50,50,1),rgba(0,0,0,0));
  32.                  transform:rotateX(90deg);}
  33.          </style>
  34.  
  35.      </head>
  36.      <body>
  37.          <div id="wrap">
  38.              <ul>
  39.                  <li style="background-image:url(img/1.jpg);"></li>
  40.                  <li style="background-image:url(img/2.jpg);"></li>
  41.                  <li style="background-image:url(img/3.jpg);"></li>
  42.                  <li style="background-image:url(img/4.jpg);"></li>
  43.                  <li style="background-image:url(img/5.jpg);"></li>
  44.                  <li style="background-image:url(img/6.jpg);"></li>
  45.                  <li style="background-image:url(img/7.jpg);"></li>
  46.                  <li style="background-image:url(img/8.jpg);"></li>
  47.                  <li style="background-image:url(img/9.jpg);"></li>
  48.                  <li style="background-image:url(img/10.jpg);"></li>
  49.                  <li style="background-image:url(img/11.jpg);"></li>
  50.              </ul>
  51.              <p></p>
  52.          </div>
  53.  
  54.          <script src="js/jquery-1.11.3.min.js"></script>
  55.          <script>
  56.          $(function(){
  57.              var oL = $('#wrap ul li').size();
  58.              var Deg = 360/oL;
  59.              var xDeg = 0,yDeg = -10,xs,ys,p=null;
  60.  
  61.              for (var i=oL-1;i>=0;i--)
  62.              {
  63.  
  64.                  $('#wrap ul li').eq(i).css({
  65.                      transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
  66.                      'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
  67.                  });
  68.              }
  69.  
  70.              $(document).mousedown(function(e){
  71.                  clearInterval(p);
  72.                  var x1 = e.clientX;
  73.                  var y1 = e.clientY;
  74.                  $(this).bind('mousemove',function(e){
  75.                      xs = e.clientX - x1;
  76.                      ys = e.clientY - y1;
  77.                      x1 = e.clientX;
  78.                      y1 = e.clientY;
  79.                      xDeg += xs*0.3;
  80.                      yDeg -= ys*0.1;
  81.                      $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
  82.                  });
  83.              }).mouseup(function(){
  84.                  $(this).unbind('mousemove');
  85.                  p = setInterval(function(){
  86.                      if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
  87.                      xs = xs*0.95;
  88.                      ys = ys*0.95
  89.                      xDeg += xs*0.3;
  90.                      yDeg -= ys*0.1;
  91.                      $('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
  92.                  },30);
  93.              });
  94.  
  95.          });
  96.          </script>
  97.      </body>
  98.  </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. js父窗口opener与parent

    parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent.在JS 中,window.opener只是对弹出窗口的母窗口的一个引用.比如: ...

  2. 安卓开发错误:The type android.support.v4.app.TaskStackBuilder$SupportParentable cannot be resolved.

    今天在使用低版本下的ActionBar,在继承ActionBarActivity时报了"The type Android.support.v4.app.TaskStackBuilder$Su ...

  3. 【转】必需知道的 SharePoint 权限 Tips

    SharePoint Tips about Permissions: What you need to know         I have been writing tips about Shar ...

  4. PHP 实现对象的持久层，数据库使用MySQL

    http://www.xuebuyuan.com/1236808.html 心血来潮,做了一下PHP的对象到数据库的简单持久层. 不常用PHP,对PHP也不熟,关于PHP反射的大部分内容都是现学的. ...

  5. ReactiveCocoa 谈谈concat

    今天的一个业务流程,业务流程大概就是这样的 1.从CoreData中获取之前的数据 2.更新界面 3.从网络获取数据 4.判断获取结果 5.处理错误判断 6.更新界面 7.判断结果numberOfNe ...

  6. Codevs 1001 舒适的路线 2006年 NOIP全国联赛提高组

    1001 舒适的路线 2006年 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观 ...

  7. 第30条：用enum代替int常量

    在java1.5之前,表示枚举类型的常用模式是声明一组具名的int常量,每个类型成员一个常量: public static final int APPLE_FUJI = 0; public stati ...

  8. QML动态加载组件

    QML中的组件可以重复使用,并且可以通过Loader加载.如下示例: import QtQuick 2.4 import QtQuick.Controls 1.3 import QtQuick.Win ...

  9. 鸟哥私房菜笔记：Iptables：数据包过滤软件

    数据包进入流程:规则顺序的重要性 iptables利用的是数据包过滤机制,所以它会分析数据包的包头数据.根据包头数据与定义的规则来决定该数据包是否可以进入主机或者是被丢弃.也就是说,根据数据包的分析资 ...

  10. iOS中数据库运用之前的准备－简单的数据库

    1.数据持久化 数据持久化是通过文件将数据存储在硬盘上 iOS下主要有四种数据持久化方式 属性列表 对象归档 SQLite数据库 CoreData 数据持久化对的对比 1.属性列表.对象归档适合小数据 ...