// JavaScript Document
window.onload=function(){
var Li1=document.getElementById('li1');
Li2=document.getElementById('li2');
Li1.onmouseover=function(){
Move(Li1,{width:400,height:200,opacity:100},function(){
Move(Li1,{width:200,height:150,opacity:70});
})
}
Li1.onmouseout=function(){
Move(Li1,{width:200,height:100,opacity:30})
}
Li2.onmouseover=function(){
Move(Li2,{width:400,height:200,opacity:100})
}
Li2.onmouseout=function(){
Move(Li2,{width:200,height:100,opacity:30})
}
}
function Move(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;//假设所有运动都达到目标值
for(var attr in json)//获取当前值
{
var icor=0
if(attr=='opacity'){
icor=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icor=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-icor)/10;
speed=speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if(icor!=json[attr]){
flag=false;
} //对flag真假的定义 假的,继续执行以上函数。
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(icor+speed)+')';
obj.style.opacity=(icor+speed)/100;
}
else{
obj.style[attr]=icor+speed+'px';
}
}//json for结束
if(flag){
clearInterval(obj.timer)
if(fn){
fn();
}
}//若flag为真
},50)}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
小王子抓猫咪
相关分类