鼠標(biāo)移動(dòng)顯示不出漸變的效果
<!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(){
//不透明度恢復(fù)到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);
}
2017-04-14
window.onload = start;
這里少了括號(hào),加上括號(hào)試試
window.onload = start();