用js实现一组图片同心椭圆周运动 图片有从小到大渐近效果

最近在网站项目中，有要求将一组图片绕同心以椭圆周轨迹循环运动，并且图片有从小到大的渐近效果。经过考虑，决定用js实现这个特效。

效果如下：

实现思路：先实现圆周运动，通过设置长边与短边，就能实现椭圆运动了。

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

<div id="container">
<img src="http://pic.webym.net/jcc/r_1.jpg" alt="1.jpg" /> 
<img src="http://pic.webym.net/jcc/r_2.jpg" alt="2.jpg" /> 
<img src="http://pic.webym.net/jcc/r_3.jpg" alt="3.jpg" /> 
<img src="http://pic.webym.net/jcc/r_4.jpg" alt="4.jpg" /> 
<img src="http://pic.webym.net/jcc/r_5.jpg" alt="5.jpg" /> 
<img src="http://pic.webym.net/jcc/r_6.jpg" alt="6.jpg" /> 
<img src="http://pic.webym.net/jcc/r_7.jpg" alt="7.jpg" /> 
<img src="http://pic.webym.net/jcc/r_8.jpg" alt="8.jpg" /> 
<img src="http://pic.webym.net/jcc/r_9.jpg" alt="9.jpg" /> 
<img src="http://pic.webym.net/jcc/r_10.jpg" alt="10.jpg" /> 
</div>

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

<style>
<!--
*{
 margin:0;
 padding:0;
}
#container{
 background-color:#000;
 width:680px; 
 height:360px; 
 position:relative;
 margin:10px auto;
}
img{
 margin:10px;
}
-->
</style>

最后当然是重头戏，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");

完整js代码：

function gallery(){
  this.inti.apply(this,arguments);
}
gallery.prototype={
  /*实现圆周运动效果
  *    id:包含图片容器id
  *    divWidth:包含图片容器宽
  *    divHeight:包含图片容器高
  *    imgWidth:图片宽
  *    imgHeight:图片高
  *    speed:转动速度
  */
  inti:function(id,divWidth,divHeight,imgWidth,imgHeight,speed){
  var that=this;
  this.img=document.getElementById(id).getElementsByTagName("img");
  this.count=this.img.length;
  this.time=0;
  this.rate=speed||0.25;
  this.divWidth=divWidth||640;
  this.divHeight=divHeight||300;
  this.imgWidth=imgWidth||150;
  this.imgHeight=imgHeight||100;
  this.each(function(index){
  this.style.width=that.imgWidth+"px";
  this.style.height=that.imgHeight+"px";
  this.style.position="absolute";
  })
  document.onmousemove=function(event){
  var event=event||window.event,positionX;
  var positionX=that.getPageX(event);
  that.rate=(positionX-document.body.clientWidth/2)/(document.body.clientWidth/2)*0.25;
  }
  this.play();
  },
  play:function(){
  var that=this;
  setInterval(function(){
  that.time+=that.rate*40/1000;
  that.each(function(index){
  this.style.left=(Math.sin(2*Math.PI*that.time+2*Math.PI/that.count*index)+1)*(that.divWidth-that.imgWidth)/2+"px";
  this.style.top=(Math.cos(2*Math.PI*that.time+2*Math.PI/that.count*index)+1)*(that.divHeight-that.imgHeight)/2+"px";
  this.style.width=(Math.cos(2*Math.PI*that.time+2*Math.PI/that.count*index)+1)*that.imgWidth/2+that.imgWidth/2+"px";
  this.style.height=(Math.cos(2*Math.PI*that.time+2*Math.PI/that.count*index)+1)*that.imgHeight/2+that.imgHeight/2+"px";
  this.style.zIndex=Math.floor((Math.cos(2*Math.PI*that.time+2*Math.PI/that.count*index)+1)*10);
  })
  },40);
  },
getPageX:function(event){
  if(event.pageX){
  return event.pageX;
  }else{
  return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
  }
  },
  each:function(fn){
  for(var i=0;i<this.count;i++)
  fn.call(this.img[i],i);
  }
}
new gallery("container");

以上js代码就成功实现了将一组图片做同心椭圆周运动、可以使用鼠标拨动控制转速，而且图片有渐近立体效果。