js实现图片联动效果

一.实现理论基础：
(1)使用定时器setInterval()，完成动画效果；
（2）使用json传值，实现多个属性同时动画效果（比如：宽度，高度，透明度等可以一起进行动画效果）； （3）使用回调函数，实现链式动画（就是宽度值增大到目的值，然后继续宽度值减小的变化）；（4）使用目标值减去初始值除以一个值（比如10），得到每次变化的增量，可以使得动画效果从初始值到目标值有个过度的过程,以不同的增量进行变化，而不是瞬间完成。 speed=(json[attr]-curr)/10
(5)使用一个标志位flag，来控制当所有的动画效果都已经完成才清除此次动画效果的定时器，否则继续进行定时器的操作，完成动画效果。
二．Html框架
很简单，就一个父容器，包裹着几张图片。

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

</div>

三.js实现

window.onload = function () {

var list = document.getElementById('list');
var listI = list.getElementsByTagName('img');
//给每一张图片添加事件绑定
for (var i = 0; i < listI.length; i++) {

listI[i].addEventListener("mouseover", function () {
change(this);
}, false);

}

//鼠标移出list区域，图片回到初始时的宽度200

list.addEventListener("mouseout", function () {
for (var i = 0; i < list.children.length; i++) {
startMove(list.children[i], {
"width": "200",
"opacity": "70"
}, 50);
}
}, false);

//当鼠标移过图片时，让焦点没在其他图片上的图片宽度变为100px,透明度变为0.7，而鼠标移动到的那张图片宽度变为600

function change(obj) {

var children = obj.parentNode.children; //为了获得其他img的兄弟节点

for (var j = 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运动效果的函数
function startMove(obj, json, interval, fn) {
clearInterval(obj.timer); //该对象每次开始动画，都先停止掉正在进行的计数器,以免发生计数器运动速度会不断增快的效果。
var flag; //用来表示所有运动是否到达目标值
//开启定时器，每隔Interval时间段执行相应动作

obj.timer = setInterval(function () {
flag = true; //进入定时器时,现将flag设置为所有的属性都已达到目标值
//获取传过来的Json值（需要变化的属性，因为要同时执行多属性，所以这里使用了json传值）。
for (var attr in json) {

var curr = 0;//用来获得当下的属性值
//判断所传递的属性是否为透明度
if (attr == 'opacity') { //如果是透明度，则获取该对象此刻的透明度值

curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else { //否则，获取该属性的当下其他属性值
curr = parseInt(getStyle(obj, attr));
}
//进行运动的速度处理
var speed = 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);
}
//获得样式函数
function getStyle(element, attr) {
var value;
if (typeof window.getComputedStyle != 'undefined') { //非ＩＥ下获得属性的方法
value = window.getComputedStyle(element, null)[attr];
} else if (typeof element.currentStyle != 'undefined') { //IE下获得属性的方法
value = element.currentStyle[attr];
}
return value;

}

四，效果图


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






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

本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1794777