首页 > 代码库 > [JavaScript案例]360度全景照片
[JavaScript案例]360度全景照片
案例: 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);};
[JavaScript案例]360度全景照片
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。