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

不知道错在哪了??

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello world</title>
		<style type="text/css">
			#li1{
				width:200px;
				height:100px;
				list-style:none;
				background-color:yellow;
				border:3px solid #000;
				opacity:0.3;
				filter:alpha(opacity:30);
			} 
		</style>
		<script src="move.js"></script>
		<script type="text/javascript">
			window.onload=function(){
				var li=document.getElementById("li1");
				li.onmouseover=function(){
					startMove(li,{width:400,height:200});
				};
			};
		</script>
	</head>
	<body>
		<ul>
			<li id="li1"></li>
		</ul>
	</body>
</html>

下面是js

function startMove(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		for(var attr in json){
			var temp=0;
			//取当前值
			if(attr=="opacity"){
				temp=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				temp=parseInt(getStyle(obj,attr));
			}
			//计算速度
			var speed=(json[attr]-temp)/8;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			//检测停止
			if(temp==json[attr]){
				clearInterval(obj.timer);
				if(fn){
					fn();
				}
			}else{
				if(attr=="opacity"){
					obj.style.filter="alpha(opacity:"+(temp+speed)+")";
					obj.style.opacity=(temp+speed)/100;
				}else{
					obj.style[attr]=temp+speed+"px";
				}
			}
		}
	},30);
}

function getStyle(obj,attr){
	if(obj.currentStyle){
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}

为什么没反应呢??

正在回答

1 回答

测试了一下可以用,看看是不是JS<script src="move.js"></script>引用路径有误,另外需要加Flag来保证只有每个值都达到target才停止动画,不然透明度到1宽度还没到400就不动了

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

举报

0/150
提交
取消

不知道错在哪了??

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