首頁(yè) 猿問 JavaScript做透明度改變，...

JavaScript做透明度改變，每次刷新后第一畫面閃一下，然后正常？

JavaScript

qq_啟啟啓_03860251 2016-10-11 09:22:10

<!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>若采用全局常數(shù)則不會(huì)出現(xiàn)問題

查看完整描述

3 回答

努力賺錢

TA貢獻(xiàn)5條經(jīng)驗(yàn) 獲得超0個(gè)贊

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>