为什么出不来05:00的效果?代码如下

来源:4-4 任意属性值(二)

Python程序猿

2016-04-04 12:20

<!DOCTYPE HTML>
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>获取属性动画2</title>
<style type="text/css">
*{margin:0; padding:0;}

	ul,li{
		list-style: none;
	}
	ul li{
		width: 200px;
		height: 100px;
		background: yellow;
		margin-bottom: 20px;
		border: 10px solid #000;
		filter:alpha(opacity:30);
		opacity:0.3;
	}
</style>
<script type="text/javascript">
	window.onload=function(){
		 var Li1=document.getElementById('li1');
		 Li1.onmouseover=function(){
		 	startMove(this,'opacity',100);
		 }
		 Li1.onmouseout=function(){
		 	startMove(this,'opacity',30);
		 }
		  
	}
function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];}//针对IE浏览器
		else{
			return getComputedStyle(obj,false)[attr];//针对火狐浏览器
		}
	
}
//var timer=null;
var alpha=30;
function startMove(obj,attr,iTarget)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function()
	{
		var icur=0;
		if(attr=='opacity')
		{
			icur=parseFloat(getStyle(obj.attr))*100;
		}
		else
		{
			icur=parseInt(getStyle(obj,attr));
		}
		var speed=(iTarget-icur)/8;
		speed=speed>0?Math.ceil(speed):Math.floor(speed);
		if(icur==iTarget)
		{
			clearInterval(obj.timer);
		}
	    else
	    {
		    	if(attr=='opacity'){
		    		obj.style.filter='alpha(opacity:'+(icur+speed)+')';
		    		obj.style.opacity=(icur+speed)/100;
		    	                   }
		    		    else{
			 //obj.style.width=icur+speed+'px';
			 obj.style[attr]=icur+speed+'px';
		                    }
	    }
	},30)
} 
</script> 
</head>
<body>
	<ul>
		<li id="li1"></li>
    </ul>
</body>
</html>


写回答 关注

1回答

  • 天道总司
    2016-04-04 12:51:17
    已采纳

    第51行

    parseFloat(getStyle(obj.attr))

    你写错了,中间是","。

    应该是

    parseFloat(getStyle(obj,attr))

    这样就没问题了

    Python...

    非常感谢!多谢指点迷津。

    2016-04-04 14:38:46

    共 1 条回复 >

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题