此案例演示的是多物体控制运动
下面两张图片演示的都是鼠标放在当前li其宽度发生变化,先看效果图,看看两图的区别:
对比:
区别就不说了,很简单,原因:控制多物体运动勿使用公共属性,此处图一是这些li公用一个timer,图二给每个li都添加了timer。代码上:
window.onload=function(){
var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
oli[i].timer=null; //给每一个元素添加自己的定时器(不公用)
oli[i].onmousemove=function(){
startMove(this,200);
}
oli[i].onmouseout=function(){
startMove(this,100);
}
}
}
//var timer=null; //公共定时器
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/7;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+'px';
}
},30);
}
for循环中每个li出发事件必须传入this,此处也可以使用闭包(函数以及它所连接的周围作用域的变量即为闭包),它突破了作用域的限制,可以读取到函数内部的变量,也可以让这些变量的值始终保存在内存中。故使用需谨慎。下面是改变多物体透明度的例子,同样这些li的alhpa(透明度初值)不能共用。
这是4个div盒子,实现鼠标滑过其透明度渐变的效果。下面是实现的js代码,
window.onload=function(){
var odiv=document.getElementsByTagName('div');
for(var i=0;i<odiv.length;i++){
odiv[i].timer=null;
odiv[i].alpha=30;
odiv[i].onmousemove=function(){
startChange(this,30);
}
odiv[i].onmouseout=function(){
startChange(this,100);
}
}
}
function startChange(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=0;
if(obj.alpha>iTarget){
speed=-10;
}else{
speed=10;
}
if(obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
},30);
}