3D旋转相册2
程序员文章站
2022-04-18 12:42:21
...
这是我写的第二种类型的3D旋转相册，它和上一个的效果是不一样的，上一个是自动的旋转，而这个是用鼠标来控制它。下边是代码（同样也是英jquery写的）：
<!DOCTYPE html>
<html lang="en" οndragstart="return false"> //加οndragstart="return false" 后鼠标什么东西都拖不动了
<head>
<meta charset="UTF-8">
<title>3D相册练习 2</title>
<style>
body{
margin: 0;
background-color: #000;
overflow: hidden; /*这是为了在最后拖动的时候不让他显示滚动条*/
}
#perspeective{
perspective: 1000px;
/* 景深 */
}
#wrap{
position: relative;
width: 150px;
height: 200px;
border: 1px solid red;
margin: 200px auto;
transform-style: preserve-3d;
/* 设置3D场景*/
transform: rotateX(-20deg) rotateY(0deg);
/* 选择角度 */
}
#wrap img{
position: absolute;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="perspeective">
<div id="wrap">
<img src="images/01.jpg" alt="">
<img src="images/02.jpg" alt="">
<img src="images/03.jpg" alt="">
<img src="images/04.jpg" alt="">
<img src="images/05.jpg" alt="">
<img src="images/06.jpg" alt="">
<img src="images/07.jpg" alt="">
<img src="images/08.jpg" alt="">
<img src="images/09.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
</div>
</div>
<script src="jquery-1.11.3.js"></script>
<script>
var oImg = document.getElementsByTagName("img");
var lenth = oImg.length;
var deg = 360/lenth;
var oWrap = document.getElementById("wrap");
//deg 就是旋转的时候求每张图片见的度数
//onload函数是为了 页面内容加载完毕以后 在执行js代码
window.onload = function(){
// 因为document.getElementsByTagName("img") 他不是数组，我们要用call函数把它变成具有数组的性质
Array.prototype.forEach.call(oImg,function(ele,index,self){
ele.style.transform = "rotateY("+deg*index+"deg) translateZ(350px)" ;//deg*index index 是图片数组的下标 ele 是代表某个元素，在这里也就是具体的某张图片
ele.style.transition = "1s " +(lenth - index)*0.1 + "s"; //transition 是过度的意思， 这里一定要注意 +(lenth - index)*0.1 + "s" 是transition的第二个属性 这里这不过是写在了外边，但第一个属性后面一定要加空格，不然代码实现不了
});
}
var newX,newY,lastX,lastY,minusY,minusX,rotX =-20,rotY = 0;
//鼠标点击事件
document.onmousedown = function(e){
//第一次旧的值产生于第一次点击的时候
lastY = e.clientY;
lastX = e.clientX;
//鼠标移动事件
this.onmousemove = function(e){
newX = e.clientX;
newY = e.clientY;
//求差值
minusX = newX - lastX;
minusY = newY - lastY;
rotY -= minusX*0.2;
rotX += minusY*0.1; //差值累加形成一个新的旋转度数值
oWrap.style.transform = "rotateX("+rotX+"deg)rotateY("+rotY+"deg)";
//新的位置在用完以后就会变成旧的值
lastX = newX;
lastY = newY;
}
//鼠标松开事件
this.onmouseup = function(e){
this.onmousemove = null; //清除鼠标的移动事件
}
}
</script>
</body>
</html>
下边是效果截图：