原生JS |
您所在的位置：网站首页 › 产品效果展示图片 › 原生JS |
原生JS
|
介绍：本案是鼠标任意在桌面上（左右）滑动，展示360度各个角度的展示图。 实现方法：要各个角度的图片（n张），图片名序号排列（0,1,2,3……n）,通过鼠标点击事件（document.onmousedown），鼠标滑动事件（document.onmousemove）和鼠标离开事件（document.onmouseup）进行控制。 首先准备img文件 完整的html文件 html,body {height:100%;} body {margin:0;} img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;} 360度全景展示 window.onload=function(){ //加载所有图片 for(var i=1;i= 0) { index = (Math.floor(dis/20) + lastIndex)%77; } else { index = (77+Math.floor(dis/20) + lastIndex)%77; 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 = ""; } };
好了，案例就实现了
|
【本文地址】