案例: 360度全景照片 鼠标在页面上滑动时图片表现的物体会随着移动方向进行旋转，从而呈现360度物体旋转效果
思路: 将所有的图片都放入指定容器内，通过切换相应的照片隐藏与显示来实现旋转效果
代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Document</title>
<script type="text/javascript" src="360.js"></script>
</head>
<body>
<div class="container" id="page750">
<img src="img/1.png">
</div>
</body>
</html>
html,body{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
img{
display: block;
margin: auto;
}
window.onload = function(){
var container = document.getElementById("page750");
/*
一次性将所有的图片标签加入
*/
var imgCount = 40;
var lastStartX = 0;
var iSpeed = 0;
var timer;
var _disX;
for(var i = 2; i <= imgCount; i++){
(function(i){
var img = new Image();
var imgNode = document.createElement("img");
img.onload = function(){
imgNode.src = this.src;
imgNode.style.display = "none";
container.appendChild(imgNode);
};
img.src = "img/"+i+".png";}
)(i);
}
var imgNodes = container.getElementsByTagName("img");
var lastImgNode = container.getElementsByTagName("img")[0];
var startX = 0;
function mouseDownHandler(event){
console.log("mouse down");
clearInterval(timer);
startX = event.clientX;
document.addEventListener("mousemove", mouseMoveHandler);
document.addEventListener("mouseup", mouseUpHandler);
return false;
}
function mouseMoveHandler(event){
console.log("mouse move");
disX = event.clientX - startX;
move();
iSpeed = _disX - lastStartX;
lastStartX = _disX;
document.title = _disX;
return false;
}
function mouseUpHandler(event){
console.log("mouse up");
document.removeEventListener("mousemove", mouseMoveHandler);
document.removeEventListener("mouseup", mouseUpHandler);
document.title = iSpeed;
timer = setInterval(function(){
if(iSpeed>0){
iSpeed--;
}else{
iSpeed++;
}
if(iSpeed==0){
clearInterval(timer);
}
disX += iSpeed;
move();
}, 20);
}
function move(){
_disX = parseInt(disX/20);
if(_disX>0){
_disX = disX%imgCount;
}else{
_disX = disX - Math.floor(disX/imgCount)*imgCount;
}
if(lastImgNode != imgNodes[_disX]){
lastImgNode.style.display = "none";
imgNodes[_disX].style.display = "block";
lastImgNode = imgNodes[_disX];
}
}
document.addEventListener("mousedown", mouseDownHandler);
};
时间： 2024-10-25 02:18:05