基于JS代码实现图片在页面中旋转效果
1.概述
在一些交易平台网站，如淘宝网、拍拍网等，经常会发现一些图片以圈的形状旋转的效果，如此反复的执行。
2.技术要点
主要应用了Math对象的sin（返回数的正弦值）和cos（返回数的余弦值），通过取得正弦值和余弦值然后加一些算法来改变当前层的位置，使图片在页面中旋转。
3.具体实现
（1）本例利用javaScript的Math对象的正弦和余弦值来改变当前层的位置，代码如下：
<scriptlanguage="javascript">
varx1=200;
varx2=200;
vartimer;
varr=60;
vari=0;
functioneddyphoto(i){
varob=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）在页面中添加一个层并在层中添加要旋转效果的图片，代码如下：
<divid="divround"style="width:50pt;top:198.75pt;left:256.5pt;position:absolute;z-index:0"> <imgsrc="temp.jpg"> </div>
以上所述是小编给大家介绍的基于JS代码实现图片在页面中旋转效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！