基于jquery 开发3D照片旋转程序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D照片旋转</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body {
background:#000;
perspective:2000px;
}
#box {
width:220px;
height:300px;
margin:200px auto;
position:relative;
transform-style:preserve-3d;
}
#box img {
width:100%;
height:100%;
position:absolute;
-webkit-box-reflect:below 10px;
}
</style>
</head>
<body>
<div id="box">
<img src="http://www.jq22.com/img/cs/300x500-1.png">
<img src="http://www.jq22.com/img/cs/300x500-2.png">
<img src="http://www.jq22.com/img/cs/300x500-3.png">
<img src="http://www.jq22.com/img/cs/300x500-4.png">
<img src="http://www.jq22.com/img/cs/300x500-5.png">
<img src="http://www.jq22.com/img/cs/300x500-6.png">
<img src="http://www.jq22.com/img/cs/300x500-7.png">
<img src="http://www.jq22.com/img/cs/300x500-8.png">
<img src="http://www.jq22.com/img/cs/300x500-9.png">
<img src="http://www.jq22.com/img/cs/300x500-1.png">
</div>
<script>
window.onload = function() {
var oWrap = document.getElementById('box');
var oImg = box.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;
var nowX, nowY, lastX, lastY, disx = 0,
disy = 0;
var roY = 0,
roX = 0;
var timer;
for (var i = 0; i < oImgLength; i++) {
oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(400px)';
oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';
}
mTop();
window.onresize = mTop;
function mTop() {
var wH = document.documentElement.clientHeight;
box.style.marginTop = wH / 2 - 180 + 'px';
}
// 拖拽:三个事件-按下 移动 抬起
//按下
document.onmousedown = function(ev) {
ev = ev || window.event;
//鼠标按下的时候,给前一点坐标赋值,为了避免第一次相减的时候出错
lastX = ev.clientX;
lastY = ev.clientY;
//移动
this.onmousemove = function(ev) {
ev = ev || window.event;
// clearInterval( timer );
nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
nowY = ev.clientY; // clientY ………………………………顶部………………
//当前坐标和前一点坐标差值
disx = nowX - lastX;
disy = nowY - lastY;
//更新wrap的旋转角度,拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
roY += disx * 0.2; // roY = roY + disx*0.2;
roX -= disy * 0.2;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
// //生成div,让div跟着鼠标动
// var oDiv = document.createElement('div');
// oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
// this.body.appendChild(oDiv);
//前一点的坐标
lastX = nowX;
lastY = nowY;
}
//抬起
this.onmouseup = function() {
this.onmousemove = null;
timer = setInterval(function() {
disx *= 0.98;
disy *= 0.98;
roY += disx * 0.2; // roY = roY + disx*0.2;
roX -= disy * 0.2;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
}, 20);
}
return false;
}
}
</script>
</body>
</html>