链式的运动不了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>缓冲运动</title>
<style>
*{ margin:0; padding:0}
div{ width:200px; height:200px; background:#f00; margin-bottom:10px; border:2px solid #999;opacity:.3; filter:alpha(opacity=30)}
</style>
<script>
window.onload=function(){
var Li1=document.getElementById('div1');
Li1.onmouseover=function(){
this.timer=null;
startMove(this,'opacity',100,function(){
startMove(this,'width',400);
});
}
}
var alpha=30;
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//1.取当前的值
var iCur=0;
if(attr=='opacity'){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);//如果统一用下面parseInt(getStyle(obj,attr))这个,获取透明度时,都是0.几,取出来就只能出来0,没有透明度的变化;乘以100是配合filter;Math.round 是为了四舍五入
}else{
iCur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(iTarget-iCur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测是否停止还是运动
if(iCur==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity='+(iCur+speed)+')';
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
}
},30)
}
//获取非行间样式
function getStyle(obj,attr){
if(obj.currentStyle){//兼容ie
return obj.currentStyle[attr];
}
else{//兼容火狐
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div></div>
</body>
</html>
有什么问题?为什么只能改变透明度,多运动就不行了。
脚本那里提示这个:
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.