用Math.sin()与Math.cos()实现图片的圆周运动

效果展示:

重新温故Math.sin()与Math.cos()方法，想找个例子实践一下，当然想到的是圆周运动。通过设置长边与短边，就能实现椭圆运动了。废话不多说，马上入正题。

首先写html代码，设置容器并附id“container”,然后加上若干图片。

Html：

< div id ="container" >
< img src ="images/1.jpg" alt ="1.jpg" />
< img src ="images/2.jpg" alt ="2.jpg" />
< img src ="images/3.jpg" alt ="3.jpg" />
< img src ="images/4.jpg" alt ="4.jpg" />
< img src ="images/5.jpg" alt ="5.jpg" />
< img src ="images/6.jpg" alt ="6.jpg" />
< img src ="images/7.jpg" alt ="7.jpg" />
< img src ="images/8.jpg" alt ="8.jpg" />
< img src ="images/9.jpg" alt ="9.jpg" />
< img src ="images/10.jpg" alt ="10.jpg" />
</ div >

加上适当的样式。最为重要的是将#container设置为相对定位，这样才能使图片的绝对定位以容器为参考对象。

Css:

* {
margin : 0 ;
padding : 0 ;
}
body {
background-color : #111
}
#container {
width : 800px ;
height : 300px ;
position : relative ;
margin : 10px auto ;
}

最后当然是重头戏，js代码。首先我们进行分析。

封装一个类。

function gallery(){
this.inti.apply(this,arguments);
}

实现方法each(),其参数接受一个函数，对元素进行遍历，并以元素作为函数上下文调用接受的函数，传递下标参数。

each:function(fn){
for(var i=0;i<this.count;i++)
 fn.call(this.img[i],i);
}，

实现方法getPageX()，以事件对象为参数，获得当前鼠标在视口X坐标位置

getPageX:function(event){
if(event.pageX){
 return event.pageX;
}else{
 return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
}
}，

实现方法play()，设置绝对定位值，必须使每个节点的 Math.sin()与Math.cos()进行同步，我们需要设置一个变量，表示时间的变化。然后每个节点都有一个初相，错开时间。

 this.style.left=(Math.sin(2*3.14*that.time+2*3.14/that.count*index)+1)*(that.divWidth-that.imgWidth)/2+"px";
 this.style.top=(Math.cos(2*3.14*that.time+2*3.14/that.count*index)+1)*(that.divHeight-that.imgHeight)/2+"px";

为体现一点点立体感，图片的大小随转动而变化就更好了。为此同样应用Math.sin()与Math.cos()来改变图片的高与宽。

 this.style.width=(Math.cos(2*3.14*that.time+2*3.14/that.count*index)+1)*that.imgWidth/2+that.imgWidth/2+"px";
 this.style.height=(Math.cos(2*3.14*that.time+2*3.14/that.count*index)+1)*that.imgHeight/2+that.imgHeight/2+"px";

图片的层叠问题当然要用zIndex属性来解决。

 this.style.zIndex=Math.floor((Math.cos(2*3.14*that.time+2*3.14/that.count*index)+1)*10);

最后实现初始化函数inti()，获取所有的图片节点，并获得其长度。

this.img=document.getElementById(id).getElementsByTagName("img");
this.count=this.img.length;

用each()方法把图片设置为绝对定位，这样才能使其进行旋动.

this.each(function(index){
 this.style.width=that.imgWidth+"px";
 this.style.height=that.imgHeight+"px";
 this.style.position="absolute";
})

还要解决一个转动的速度问题，设置一个变量表示圆周运动的周期，并添加一个事件处理程序获取鼠标的位置进而改变周期的值实现速度大小的控制。

最后创建实例，展示动画效果。

new gallery("container");

表达不太好，还是直接上代码。

javascript:

View Code

1 function gallery(){
2   this .inti.apply( this ,arguments);
3 }
4 gallery.prototype = {
5   /* 实现圆周运动效果
6 * id:包含图片容器id
7 * divWidth:包含图片容器宽
8 * divHeight:包含图片容器高
9 * imgWidth:图片宽
10 * imgHeight:图片高
11 * speed:转动速度
12 */
13 inti: function (id,divWidth,divHeight,imgWidth,imgHeight,speed){
14 var that = this ;
15 this .img = document.getElementById(id).getElementsByTagName( " img " );
16 this .count = this .img.length;
17 this .time = 0 ;
18 this .rate = speed || 0.25 ;
19 this .divWidth = divWidth || 800 ;
20 this .divHeight = divHeight || 300 ;
21 this .imgWidth = imgWidth || 150 ;
22 this .imgHeight = imgHeight || 100 ;
23 this .each( function (index){
24 this .style.width = that.imgWidth + " px " ;
25 this .style.height = that.imgHeight + " px " ;
26 this .style.position = " absolute " ;
27 })
28 document.onmousemove = function (event){
29 var event = event || window.event,positionX;
30 var positionX = that.getPageX(event);
31 that.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2)*0.25;
32 }
33 this .play();
34 },
35 play: function (){
36 var that = this ;
37 setInterval( function (){
38 that.time += that.rate * 40 / 1000;
39 that.each( function (index){
40 this .style.left = (Math.sin( 2 * Math.PI * that.time + 2 * Math.PI / that.count*index)+1)*(that.divWidth-that.imgWidth) / 2 + " px " ;
41 this .style.top = (Math.cos( 2 * Math.PI * that.time + 2 * Math.PI / that.count*index)+1)*(that.divHeight-that.imgHeight) / 2 + " px " ;
42 this .style.width = (Math.cos( 2 * Math.PI * that.time + 2 * Math.PI / that.count*index)+1)*that.imgWidth / 2 + that.imgWidth / 2+"px";
43 this .style.height = (Math.cos( 2 * Math.PI * that.time + 2 * Math.PI / that.count*index)+1)*that.imgHeight / 2 + that.imgHeight / 2+"px";
44 this .style.zIndex = Math.floor((Math.cos( 2 * Math.PI * that.time + 2 * Math.PI / that.count*index)+1)*10);
45 })
46 }, 40 );
47 },
48
49 getPageX: function (event){
50 if (event.pageX){
51 return event.pageX;
52 } else {
53 return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
54 }
55 },
56 each: function (fn){
57 for ( var i = 0 ;i < this .count;i ++ )
58 fn.call( this .img[i],i);
59 }
60 }
61 new gallery( " container " );

转载于:https://www.cnblogs.com/littleG/archive/2011/04/20/2022675.html