Of Stack

JS to achieve the image plane rotation method

  • 2021-01-18 06:18:11
  • OfStack

This article describes the JS implementation of the image plane rotation method. To share with you for your reference, as follows: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Image rotation </title>
<style type="text/css" >
#div1{ position:relative;height:800px; border:1px solid red;}
#div1 img{ position:absolute;}
</style>
</head>
<body >
<div id="div1"  >
 <img src="https://www.ofstack.com/images/logo.gif"  />
 <img src="https://www.ofstack.com/images/logo.gif"  />
 <img src="https://www.ofstack.com/images/logo.gif"  />
 <img src="https://www.ofstack.com/images/logo.gif"  />
 <img src="https://www.ofstack.com/images/logo.gif"  />
 <img src="https://www.ofstack.com/images/logo.gif"  />
</div>
<script type="text/javascript" >
  var centerx = 400; // Center of the circle X
  var centery = 300; // Center of the circle Y
  var r = 300; // The radius of 
  var oimages = document.getElementById("div1").getElementsByTagName("IMG"); // Image collection 
  var cnt = oimages.length; // Picture number 
  var da = 360 / cnt; // Image interval Angle 
  var a0 = 0; // Rotated Angle 
  var timer;
  for (var i = 0; i < cnt; i++) {
    oimages[i].onmouseover = stop;
    oimages[i].onmouseout = start;
  }
  function posimgs() {
    for (var i = 0; i < cnt; i++) {
      oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
      oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
    }
  }
  // posimgs();
  function start() {
    timer = window.setInterval("posimgs();a0++;", 100);
  }
  function stop() {
    window.clearInterval(timer);
  }
  start();
</script>
</body>
</html>

More about JavaScript related content interested readers can view the site features: "JavaScript search algorithm skills summary", "JavaScript animation effects and skills summary", "JavaScript error and debugging skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript eraser algorithm and skills summary" and "JavaScript mathematical operation usage summary"

I hope this article is helpful to JavaScript program design.

Related articles: