<!DOCTYPE html><html><head><meta charset="UTF-8"><title>透明度</title><style type="text/css">*{padding: 0;margin: 0;}#color{width: 250px;height: 250px;margin: 80px auto;background-color: red;filter: alphal(opcity=100);opacity: 1;}</style></head><body><div id="color"></div><script type="text/javascript">window.onload = function(){var col = document.getElementById("color");col.onmouseover = function(){ms(col,30);}col.onmouseout = function(){ms(col,100);}}var timer;//var opac =100;function ms(obj,itar){var opac = obj.style.opacity*100,speed = 0;if(opac < itar){speed = 10;}else{speed = -10;}clearInterval(obj.timer);obj.timer = setInterval(function(){if(opac == itar){clearInterval(obj.timer);}else{opac += speed;obj.style.filter = "alphal(opcity="+ opac +")";obj.style.opacity = opac/100;}},50);}</script></body></html>若采用全局常数则不会出现问题
3 回答
努力赚钱
TA贡献5条经验 获得超0个赞
css3就轻松搞定哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
div{width: 300px;height: 300px;background: pink;transition: all 2s ease;}
div:hover{background: blue;}
</style>
</head>
<body>
<div></div>
</body>
</html>
添加回答
举报
0/150
提交
取消