js实现图片360度旋转

概述

这一次是一个简单的效果，那就是思考的问题

效果：

思考

旋转的效果是根据鼠标的移动距离显示不同的图片，形成视觉差异，好像真的在旋转

因为效果是根据鼠标的移动距离，也就是移动的像素值来操作的。根据默认情况，移动鼠标时，图片旋转太快，所以我们应该将鼠标的距离设置为15，以降低图片的旋转速度。

var l=ParSeint(-x/15)；

一个问题是，当鼠标向左移动时，移动距离为负。如果你想正确显示图片，你应该处理负值。例如，-1，最后要显示的图片是72(总共有72张图片)。第44张图片应该以-100显示，但是因为图片的名称是从1开始的，而不是从0开始的，所以应该在末尾添加1。

var l=ParSeint(-x/15)；if(l 0){ l=lr 1；} else { l=(l-72 *(Math . floor(l/72)))1；}代码

样式html，正文{ height :100%；} body { margin:0} img { width: 640pxheight: 378px绝对位置：左： 50%右： 50%；margin-top :120 px；左边距left:320px} /style脚本window . onload=function(){ var x=0；var oImg=document . getelementbyid(' img 1 ')；document . onmousedown=function(ev){ var ev=ev | | enent；var DIsX=ev . client x-x；document . onmousemove=function(ev){ var ev=ev | | event；x=ev . client x-DIsX；var l=ParSeint(-x/15)；if(l 0){ l=lr 1；} else { l=(l-72 *(Math . floor(l/72)))1；} oimg . src=' img/Seq _ v 04 _ 640 x378 _ ' l '。“jpg”返回false};document . onmouseup=function(){ document . onmouseup=null；document.onmousemove=null}返回false} }/script/head dydiv class=' img _ wrap ' img id=' img 1 ' src=' http : img/seq _ v 04 _ 640 x378 _ 1 . jpg '/div/body，以上就是本文的全部内容。希望这篇文章的内容能给大家的学习或工作带来一些帮助，也希望大家多多支持我们！