<script type="text/javascript">
window.onload = function(){
var li1 = document.getElementById('li1');
li1.onmousemove = function(){
startMove(li1,{width:201,height:200,opacity:100});
}
li1.onmouseout = function(){
startMove(li1,{width:200,height:100,opacity:30});
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//stareMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn){
var flag=true;//假设
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var icur=0;
if(attr == 'opacity'){
var icur = parseFloat(getStyle(obj, attr))*100;
}else{
var icur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur != json[attr]) //若不满足当前值,则flag=false
{
flag=false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur + speed+'px';
}
}
if(flag){ //如果满足flag,停止计时器
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
</script>
此处用到json。格式为 var json={name:key}
例如:json:{a:12,b:13} 遍历需要用for in。
例如 for(var i in json){ alert(i); } 此时会依次弹出 a b。
若改为 alert( json[i] ) 则依次弹出 12 13.