码迷,mamicode.com
首页 > 其他好文 > 详细

在页面中旋转的图片效果

时间:2016-06-15 12:40:54      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

在页面中旋转的图片效果

标签:

原文地址:http://www.cnblogs.com/zkn11199/p/5581920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!