介绍：本案是鼠标任意在桌面上（左右）滑动，展示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>好了，案例就实现了
