一.实现理论基础：

(1)使用定时器setInterval()，完成动画效果；

（2）使用json传值，实现多个属性同时动画效果（比如：宽度，高度，透明度等可以一起进行动画效果）；

（3）使用回调函数，实现链式动画（就是宽度值增大到目的值，然后继续宽度值减小的变化）；

（4）使用目标值减去初始值除以一个值（比如10），得到每次变化的增量，可以使得动画效果从初始值到目标值有个过度的过程,以不同的增量进行变化，而不是瞬间完成。

speed=(json[attr]-curr)/10

(5)使用一个标志位flag，来控制当所有的动画效果都已经完成才清除此次动画效果的定时器，否则继续进行定时器的操作，完成动画效果。

二．Html框架

很简单，就一个父容器，包裹着几张图片。

<divid="container"><divid="list"><imgsrc="../img/demo1.jpg"alt="1"/><imgsrc="../img/demo2.jpg"alt="2"/><imgsrc="../img/demo3.jpg"alt="3"/><imgsrc="../img/demo4.jpg"alt="4"/><imgsrc="../img/demo5.jpg"alt="5"/></div></div>

三.js实现

window.onload=function(){varlist=document.getElementById('list');varlistI=list.getElementsByTagName('img');//给每一张图片添加事件绑定for(vari=0;i<listI.length;i++){listI[i].addEventListener("mouseover",function(){change(this);},false);}//鼠标移出list区域，图片回到初始时的宽度200list.addEventListener("mouseout",function(){for(vari=0;i<list.children.length;i++){startMove(list.children[i],{"width":"200","opacity":"70"},50);}},false);//当鼠标移过图片时，让焦点没在其他图片上的图片宽度变为100px,透明度变为0.7，而鼠标移动到的那张图片宽度变为600functionchange(obj){varchildren=obj.parentNode.children;//为了获得其他img的兄弟节点for(varj=0;j<children.length;j++){if(obj!=children[j]){startMove(children[j],{"width":"100","opacity":"70"},50,startMove(obj,{"width":"600","opacity":"100"},50));}};}}//进行js运动效果的函数functionstartMove(obj,json,interval,fn){clearInterval(obj.timer);//该对象每次开始动画，都先停止掉正在进行的计数器,以免发生计数器运动速度会不断增快的效果。varflag;//用来表示所有运动是否到达目标值//开启定时器，每隔Interval时间段执行相应动作obj.timer=setInterval(function(){flag=true;//进入定时器时,现将flag设置为所有的属性都已达到目标值//获取传过来的Json值（需要变化的属性，因为要同时执行多属性，所以这里使用了json传值）。for(varattrinjson){varcurr=0;//用来获得当下的属性值//判断所传递的属性是否为透明度if(attr=='opacity'){//如果是透明度，则获取该对象此刻的透明度值curr=Math.round(parseFloat(getStyle(obj,attr))*100);}else{//否则，获取该属性的当下其他属性值curr=parseInt(getStyle(obj,attr));}//进行运动的速度处理varspeed=0;speed=(json[attr]-curr)/10;//每次速度变化的增量，每次实时的获得，可以达到变速运动speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度增量大于0，向上取整，速度增量小于0,向下取整if(curr!=json[attr]){//当随着属性值还不等于要达到的目标值，就将flag设置为false;flag=false;}//进行运动变化if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(curr+speed)+")";obj.style.opacity=(curr+speed)/100;}else{obj.style[attr]=curr+speed+'px';}}if(flag){//如果flag值为true,说明传来的属性值，都已经变化到目标值，就可以清除计数器，//同时在检查是否有回调函数传入,若有就继续执行回调函数。clearInterval(obj.timer);if(fn){fn();}}},interval);}//获得样式函数functiongetStyle(element,attr){varvalue;if(typeofwindow.getComputedStyle!='undefined'){//非ＩＥ下获得属性的方法value=window.getComputedStyle(element,null)[attr];}elseif(typeofelement.currentStyle!='undefined'){//IE下获得属性的方法value=element.currentStyle[attr];}returnvalue;}

四，效果图

当鼠标移入图片内，移入的该张图片进行宽度增加，透明度增加，其他几张宽度稍微变小一点，如图：

这样，整个过程的滑动就实现了图片的联动效果，看起来很漂亮。