原生JS --360度全景展示

xiaoxiao2021-03-01  40

介绍:本案是鼠标任意在桌面上(左右)滑动,展示360度各个角度的展示图。

实现方法:要各个角度的图片(n张),图片名序号排列(0,1,2,3……n),通过鼠标点击事件(document.onmousedown),鼠标滑动事件(document.onmousemove)和鼠标离开事件(document.onmouseup)进行控制。

首先准备img文件

 完整的html文件

<!DOCTYPE html> <html> <head> <style> html,body {height:100%;} body {margin:0;} img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;} </style> <meta charset="utf-8" /> <title>360度全景展示</title> <script> window.onload=function(){ //加载所有图片 for(var i=1;i<=76; i++){ var img = document.createElement("img"); img.src = "img/img/"+i+".jpg"; img.style.display = "none"; document.body.appendChild(img); } //伪数组 instanceof NodeList var imgs = document.getElementsByTagName("img"); var lastIndex = 0; // 当前横坐标坐标 var startX = 0; // 记录鼠标点下时的横坐标 var index = 0; // 记录鼠标移动的坐标距离 var prevImg = null; document.onmousedown = function(event){ startX = event.clientX; //console.log(startX) document.onmousemove = function(event){ //随着移动,更换图片 var x = event.clientX; var dis = x - startX; console.log(dis); if(dis >= 0) { index = (Math.floor(dis/20) + lastIndex)w; } else { index = (77+Math.floor(dis/20) + lastIndex)w; console.log(index) } if(prevImg) prevImg.style.display = "none"; imgs[index].style.display = "block"; document.title = index; prevImg = imgs[index]; } }; document.onmouseup = function(event){ //鼠标松开时记录位置 lastIndex = index; document.onmousemove = ""; } }; </script> </head> <body> <div style="z-index: 100; opacity: 0.01; background: black; position: fixed; width: 100%; height: 100%;"></div> <img id="img0" src="img/img/0.jpg" /> </body> </html>

 好了,案例就实现了

 

转载请注明原文地址: https://www.6miu.com/read-4200001.html

最新回复(0)