版权声明：我的新浪博客http://blog.sina.com.cn/f6056 https://blog.csdn.net/weimob258616/article/details/81912209
实现效果：多个Div区块实现鼠标移入该区块，该区块逐渐透明图降低，鼠标移出该区块，该区块透明度逐渐恢复原状。
主要应用：js运动框架的使用
<!doctype html>
<html>
<head>
<title>JS实现多个Div元素的不透明度变化</title>
<meta charset="utf-8">
<style>
.div1{float:left;width:300px;height:300px;background:red;padding:0;filter:alpha(opacity=30);opacity:0.3;margin:5px;}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByClassName('div1');
for(var i=0;i<aDiv.length;i++){
aDiv[i].onmouseover=function(){
this.alpha=30;
startMove(this,100);
}
aDiv[i].onmouseout=function(){
this.alpha=100;
startMove(this,30);
}
}
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
speed=(iTarget-obj.alpha)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.alpha+=speed;
obj.style.opacity=obj.alpha/100;
obj.style.filter='alpha(opacity="+obj.alpha+")';
}
},30)
}
</script>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>