为了账号安全,请及时绑定邮箱和手机立即绑定

完美运动框架问题,鼠标放上去有效果,离开后透明度没有变回来

<!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 type="text/css">
*{margin:0;padding:0;}

div{height:100px;width:100px;background-color:#F00;border:5px solid #63C;margin-top:2px;opacity:0.3;filter:Alpha(opacity:30);}
</style>

<script>
window.onload=function(){
	var div1=document.getElementById("div1");
	div1.onmouseover=function(){startMove(div1,{"width":"200","opacity":"100"})};
	div1.onmouseout=function(){startMove(div1,{"opacity":"30","width":"100"})};
		}
//完美运动框架
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr]
		}
	else{return getComputedStyle(obj,false)[attr];}
	}
//startMove(obj,{attr1:target1,attr2:target2},fn)
function startMove(obj,json,fn){
	clearInterval(obj.timer);
	var flag;//标志所有运动是否达到目标值
	obj.timer=setInterval(function(){
		flag=true;//进入定时器时,现将flag设置为所有的属性值都已经达到目标值
		for( var attr in json)
		//取当前的值
		{var icur=0;
		if(attr=="opacity"){icur=Math.round(getStyle(obj,attr)*100)}else{icur=parseInt(getStyle(obj,attr));}
		//设置速度
	    speed=(json[attr]-icur)/8;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		//停止动画
		if(icur!==json[attr]){
			flag=false;}//假设有三个json的值,三个值中只要有一个没达到目标值,flag值就为false
		if(attr=="opacity"){obj.style[attr]=icur;}else{obj.style[attr]=icur+speed+"px";}
		//obj.style.width=obj.style[attr]  注意 style[attr]
		if(flag){clearInterval(obj.timer);if(fn){fn()}
		}}},30);
}


</script>

</head>

<body>
<div id="div1"> </div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

不知道是什么问题,跪求请大神帮忙看看。

正在回答

1 回答

代码43行,if成立执行代码改成

obj.style.filter='alpha(opacity:'+(icur+speed)+')';obj.style.opacity=(icur+speed)/100;


0 回复 有任何疑惑可以回复我~
#1

吃瓜小夏 提问者

太感谢了,可以运行了。
2016-05-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

完美运动框架问题,鼠标放上去有效果,离开后透明度没有变回来

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信