本文介绍如何利用JavaScript的Math对象中的正弦和余弦函数，结合定时器实现图片在页面中的圆周旋转效果。通过计算坐标改变层的位置，并处理半径变化逻辑，完成持续的旋转动画演示。
概述
1.概述
在部分交易平台网站（如淘宝网、拍拍网等）中，常可见到图片沿圆形轨迹持续旋转的视觉效果。
技术要点
2.技术要点
核心在于应用Math对象的sin（返回正弦值）与cos（返回余弦值）方法。通过获取这两个三角函数值，并结合特定算法动态调整当前DOM元素的位置坐标，从而实现图片在页面中的旋转动画。
具体实现
3.具体实现
（1）本示例利用JavaScript中Math对象的正弦和余弦值来动态改变层的位置，核心逻辑代码如下：
<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）在HTML页面中创建一个包含目标图片的层，具体结构代码如下：
<div id="divround" style="width:50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0">
<img src="temp.jpg">
</div>以上介绍了基于JavaScript代码实现图片页面旋转效果的相关技术细节，希望能为读者提供有益参考。如有疑问欢迎留言，小编将及时回复。感谢对本站的支持！