鼠标移动显示不出渐变的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js透明度变化</title>
<link type='text/css' rel='stylesheet' href='css/alpha1.css' />
<style src='js/alpha1.js'></style>
</head>
<body>
<div id='div1'> </div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
#div1{
width:300px;
height:200px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
}
window.onload = start;
function start(){
console.log(123);
var div1 = document.getElementById('div1');
div1.onmouseover = function(){
//不透明度为100或1.0
console.log(123);
Move(100);
}
div1.onmouseout = function(){
//不透明度恢复到30或0.3
Move(30);
}
}
var timer = null,
alpha = 30;
function Move(Itarget){
var div1 = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha > Itarget){
speed = -10;
}else{
speed = 10;
}
if(alpha == Itarget){
clearInterval(timer);
}else{
alpha = alpha + speed;
div1.style.filter = 'alpha(opacity:' + alpha + ')';
//filter:alpha(opacity:30);
div1.style.opacity = alpha/100;
}
},30);
}
