在页面中旋转的图片效果

Posted 2020-07-25 柯南&

1.概述

在一些交易平台网站，如淘宝网、拍拍网等，经常会发现一些图片以圈的形状旋转的效果，如此反复的执行。

 

2.技术要点

主要应用了Math对象的sin（返回数的正弦值）和cos（返回数的余弦值），通过取得正弦值和余弦值然后加一些算法来改变当前层的位置，使图片在页面中旋转。

 

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）在页面中添加一个层并在层中添加要旋转效果的图片，代码如下：

<div id="divround" style="width:50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0">

<img src="temp.jpg">

</div>