1. Overview
On some trading platform websites, such as Taobao, Paipai, etc., you often find that some pictures rotate in the shape of circles, and they are executed repeatedly.
2. Technical points
The main application of the Math object sin (returning the sine value of the number) and cos (returning the cosine value of the number). By obtaining the sine value and cosine value and adding some algorithms to change the position of the current layer, so that the picture rotates in the page.
3. Specific implementation
(1) This example uses the sine and cosine values of the Math object in javaScript to change the position of the current layer. The code is as follows:
<script language="javascript"> var x1=200; var x2=200; var timer;var r=60;var i = 0; function eddyphoto(i) { var ob=document.all("divround");ob.style.posTop = r*Math.sin((i*Math.PI)/180)+x1; ob.style.posLeft = r*Math.cos((i*Math.PI)/180)+x2; i=i+1;if (r>100){window.clearTimeout(timer);}else{if (i > 360){i = 0;r = r + 1;}timer=setTimeout("eddyphoto("+i+")",10);}}eddyphoto(0);</script>(2) Add a layer to the page and add the image to rotate the effect to the layer. The code is as follows:
<div id="divround"><img src="temp.jpg"></div>
The above is the relevant knowledge introduced to you by the editor to realize the effect of rotating images on the page based on JS code. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!