在页面中旋转的图片效果

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="50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0">

<img src="temp.jpg">

</div>
原文地址:https://www.cnblogs.com/zkn11199/p/5581920.html