3D拖拽相册的实现
<!DOCTYPE html>
<html onselectstart="return false">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>3D拖拽相册</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#000;}
.pic{width:120px;height:180px;margin:200px auto 0;position:relative;transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);}
.pic img{position:absolute;border-radius:5px;box-shadow:0 0 10px #FFF;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);}
.pic p{width:1200px;height:1200px;position:absolute;left:50%;top:100%;margin-top:-600px;margin-left:-600px;
transform:rotateX(90deg);border-radius:600px;
background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,0.3),rgba(0,0,0,0));}
</style>
</head>
<body>
<div class="pic">
<img src="img/1.jpg" width="100%" height="100%" alt=""/>
<img src="img/2.jpg" width="100%" height="100%" alt=""/>
<img src="img/3.jpg" width="100%" height="100%" alt=""/>
<img src="img/4.jpg" width="100%" height="100%" alt=""/>
<img src="img/5.jpg" width="100%" height="100%" alt=""/>
<img src="img/6.jpg" width="100%" height="100%" alt=""/>
<img src="img/7.jpg" width="100%" height="100%" alt=""/>
<img src="img/8.jpg" width="100%" height="100%" alt=""/>
<img src="img/9.jpg" width="100%" height="100%" alt=""/>
<img src="img/10.jpg" width="100%" height="100%" alt=""/>
<img src="img/11.jpg" width="100%" height="100%" alt=""/>
<p></p>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
var imgL = $(".pic img").size();
var deg = 360 / imgL;
var roY = 0,roX = -10;
var xN = 0, yN = 0;
var play = null;
$(".pic img").each(function(i) {
$(this).css({"transform":"rotateY(" + i * deg + "deg) translateZ(350px)"});
$(this).attr("ondragstart", "return false");
});
$(document).mousedown(function(ev) {
clearInterval(play);
var x_ = ev.clientX;
var y_ = ev.clientY;
$(this).bind("mousemove", function(ev) {
var x = ev.clientX;
var y = ev.clientY;
xN = x - x_;
yN = y - y_;
roY += xN * 0.2;
roX -= yN * 0.1;
$(".pic").css({transform:"perspective(800px) rotateX(" + roX+ "deg) rotateY(" + roY + "deg)"});
x_ = ev.clientX;
y_ = ev.clientY;
});
}).mouseup(function() {
$(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;
$(".pic").css({transform:"perspective(800px) rotateX(" + roX+ "deg) rotateY(" + roY + "deg)"});
}, 30);
});
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/02/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读