JavaScript做透明度改变，每次刷新后第一画面闪一下，然后正常？
<!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>
若采用全局常数则不会出现问题
qq_启啟啓_038602513回答
-
努力赚钱
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>
随时随地看视频慕课网APP
相关分类
JavaScript