JQ实现3D拖拽效果
<!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拖拽效果的更多相关文章
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- WinForm支持拖拽效果
有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- 用JS实现版面拖拽效果
类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- ExtJS拖拽效果
ExtJS拖拽效果 <html> <head> <title>hello</title> <meta http-equiv="conte ...
随机推荐
- ios代理设计模式
代理设计模式的作用: 1.A对象监听B对象的一些行为,A成为B的代理 2.B对象想告诉A对象一些事情,A成为B的代理 代理设计模式的总结: 如果你想监听别人的一些行为,那么 ...
- c数组和指针的理解
#include<stdio.h> int main(void) { ,,,,}; ); printf(,*(p-)); // ] = &a; √ // ] = a; × // ] ...
- kali Linux 文本图形界面切换遇到的怪问题
前段装了在Virtual Box上装一个Kali Linux玩,然后设为了开机进入文本界面,后来遇到无法上网的问题,网上找到解决方法,说是NAT地址转换和host-only双网卡顺序问题,按照网上的说 ...
- Matlab中plot、fplot、ezplot的使用方法和区别
函数plot 是绘制二维图形的最基本函数,它是针对向量或矩阵的列来绘制曲线的.也就是说,使用plot 函数之前,必须首先定义好曲线上每一点的x 及y 坐标; 常用格式为: (1)plot(x) 当x ...
- git 配置用户名和邮箱
在安装了git for windows之后,个人总是忘记配置git config的命令,以此记录一下: 配置用户名和邮箱的命令 git config --global user.name " ...
- ~/.ssh目录找不到解决方法
执行 cd ~/.ssh发现ssh目录找不到 [root@ocdp2 ~]# cd ~/.ssh -bash: cd: /root/.ssh: No such file or directory 原因 ...
- Android Metro风格的Launcher开发系列第一篇
前言:从毕业到现在已经三年多了,回忆一下这三年基本上没有写过博客,总是觉得忙,没时间写,也觉得写博客没什么大用.但是看到很多大牛们都在写博客,分享自己的东西,所以嘛本着向大牛看齐,分享第一,记录第二的 ...
- 关于Masonry框架(AutoLayout)的用法--面向初学者
Masonry作为目前较为流行的自动布局第三方框架,简单易用,大大减少了程序员花在UI布局和屏幕适配的精力与时间. 1 基本用法 1.1 事例1: 图1-1 // 首先是view1自动布局 [view ...
- UTF-8/UTF-16/UTF-32
UTF-8/UTF-16/UTF-32 一.UTF-8/UTF-16/UTF-32三者的区别 二.BOM的检测与删除 1.用VIM去除<feff>,即 U+FEFF.注意:这是一个字符,而 ...
- poj代码搬家啦啦啦
我的poj代码搬家啦,大家想看可以到 blog.csdn.net/michaelysm 来看.欢迎哦