Js achieves 360-degree rotation of images and 360-degree js Images

Js achieves 360-degree rotation of images and 360-degree js Images

Overview

This is a simple result, but it is a problem of thinking.

Effect:

Ideas

The rotation effect is to display different images based on the moving distance of the mouse, forming a visual difference, as if it is being rotated

Because the effect is based on the moving distance of the mouse, that is, the moving pixel value. By default, the image rotates too fast when you move the mouse. Therefore, we need to move the mouse 15 minutes away to reduce the image rotation speed.

var l = parseInt(-x/15);

One problem is that when the mouse moves to the left, the moving distance is negative. To correctly display the image, you must process the negative value. For example, in-1, the last image is 72 (72 images in total ). -100: 44th images must be displayed. However, since the image name starts from 1, rather than from 0, you must add 1 at the end.

var l = parseInt(-x/15);  if(l > 0){   l = l%72+1;  }else{   l = (l + -72*(Math.floor(l/72))) + 1;  }

Code

<style> html,body {height:100%;} body {margin:0;} img{ width: 640px; height: 378px; position: absolute; left: 50% top: 50%; margin-top:120px;  margin-left:320px; } </style> <script> window.onload = function(){ var x = 0; var oImg = document.getElementById('img1'); document.onmousedown = function(ev){  var ev = ev || enent;  var disX = ev.clientX - x;  document.onmousemove = function(ev){  var ev = ev || event;  x = ev.clientX - disX;  var l = parseInt(-x/15);  if(l > 0){   l = l%72+1;  }else{   l = (l + -72*(Math.floor(l/72))) + 1;  }  oImg.src = "img/Seq_v04_640x378_"+ l +".jpg"  return false;  };  document.onmouseup = function(){  document.onmouseup = null;  document.onmousemove = null;  }  return false; } } </script>
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!