为什么我鼠标移入宽高透明度会变，移出就不变了？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么我鼠标移入宽高透明度会变，移出就不变了？

来源：5-1 JS链式动画

奈奈我喜欢你呀

2016-03-03 15:47

<!DOCTYPE html>

<html>

<head>

<title>chainMovement</title>

</head>

<body>

</body>

</html>

*{
	margin:0;
	padding:0;
}
#chainMovement{
	width: 200px;
	height: 100px;
	background: red;
	position: relative;
	font-size: 12px;
	filter:alpha(opacity:30);
	opacity: 0.3;
	border: 1px solid black;
}

window.onload=function() {
	var chainMovement=document.getElementById('chainMovement');
	chainMovement.onmouseover=function() {
		starMove(chainMovement,'width',400,function() {
			starMove(chainMovement,'height',200,function() {
				starMove(chainMovement,'opacity',100);
			})
		})
	}
	chainMovement.onmouseout=function() {
		starMove(chainMovement,'opacity',30,function() {
			starMove(chainMovement,'height',100,function() {
				starMove(chainMovement,'width',200);
			})
		})
	}
}
function starMove(obj,attr,iTarget,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
	//取当前的值
	var icur=0;
	//用if判断属性
	if(attr=='opacity'){
		icur=Math.round(parseFloat(getStyle(obj,attr)));
	//由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入
	}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);
		if(fn){
			fn();
		}
	}else{
		if (attr=='opacity') {
			obj.style.filter='alpha(opacity:'+icur+speed+')';
			obj.style.opacity=(icur+speed)/10;
		}else{
			obj.style[attr]=icur+speed+'px';
			}	
		}
	},30);
}
function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
  return obj.currentStyle[attr];
 }
 else
 {
  return getComputedStyle(obj, false)[attr];
 }
}

写回答关注