您的位置：首页 > Web前端 > JQuery

jquery+css3实现3D拖拽相册

2016-03-14 15:38 561 查看

jquery+css3实现3D拖拽相册

设置3d效果
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

rotateX(-10deg) （屏幕内外，-10deg为向外10度偏转）
r 4000 otateY(0deg); 左右

变成圆角
border-radius:5px;

倒影（很多浏览器不兼容）
box-shadow:0px 0px 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);（从实物50%的地方开始往下面到100%）

（页面）document树加载完成后触发,jquary可以添加document树的组件，操作文档
$(function()

计时器函数
setInterval(function(){});

下面是代码：（文件打包已经上传，需要图片）

<!DOCTYPE html>
<html onselectstart='return  false'>
<head>
<meta charset="UTF-8">
<title>3D拖拽相册</title>
<!-- 层叠样式表,化妆师 -->

<style type="text/css">
*{
margin:0px;
padding:0px;
}

body{
background:#000000;
}

div.pic{
width:120px;
height:180px;
margin:150px auto 0;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

}

div.pic img{
position :absolute;
width:100%;
height:100%;
border-radius:5px;
box-shadow:0px 0px 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);

}
div.pic p{
width:1200px;
height:1200px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.3),rgba(0,0,0,0));
position:absolute;
left:50%;
top:100%;
margin-top:-600px;
margin-left:-600px;
transform: rotateX(90deg);
border-radius:600px;
}
</style>

</head>
<body>

<div class="pic">
<img src='1.jpg'/>
<img src='2.jpg'/>
<img src='3.jpg'/>
<img src='4.jpg'/>
<img src='5.jpg'/>
<img src='6.jpg'/>
<img src='7.jpg'/>
<img src='8.jpg'/>
<img src='9.jpg'/>
<img src='10.jpg'/>
<img src='11.jpg'/>
<p></p>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//页面加载完成后直接执行
$(function(){
var imgL= $('.pic img').size();
var deg=360/imgL;
var roY=0;
var roX=-10;
var xN=0;
var yN=0;
$('.pic img').each(function(i){
$(this).css({
'transform':'rotateY('+i*deg+'deg)translateZ(350px);'
});
$(this).attr('ondragstart','return false');
});

$(document).mousedown(function(ev){
var x_=ev.clientX;
var y_=ev.clientY;

//	console.log('鼠标按下！');
$(this).bind('mousemove',function(ev){
//		console.log("鼠标在移动");
var x=ev.clientX;
var y=ev.clientY;

xN=x-x_;
yN=y-y_;
roY+=xN*0.2;
roX-=yN*0.1;
//用鼠标画出div格子，drag，利用格子的间距模仿快慢
//	$('body').append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:'+y+'px;left:'+x+'px;"></div>')

$('div.pic').css({
transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'

});
x_=ev.clientX;
y_=ev.clientY;
});
}).mouseup(function(){
//console.log('鼠标抬起');
$(this).unbind('mousemove');

var play=setInterval(function(){
xN*=0.95;
yN*=0.95
if(Math.abs(xN)<1&&Math.abs(yN)<1)
//停止这个函数
clearInterval(play);

roY+=xN*0.2;
roX-=yN*0.1;
$('div.pic').css({
transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'
});
console.log(xN);
},30);
});

});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航