<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
div{
width:150px;
height:150px;
background:red;
Filter:alpha (opacity:30);
opacity:0.3;
margin:5px;
Float:left;
}
</style>
<script>
Window.onload = function () {
var mydiv = document.getelementtagname (' div ');
for (Var i=0;i<mydiv.length;i++) {
Mydiv[i].timer = null;
Mydiv[i].alpha = 30;
Mydiv[i].onmouseover = function () {
Starmove (this,100);
};
Mydiv[i].onmouseout = function () {
Starmove (this,30);
};
}
};
function Starmove (obj,target) {
Clearinterval (Obj.timer);
Timer = setinterval (function () {
var speed = (Target-obj.alpha)/6;
Speed = speed>0? Math.ceil (Speed): Math.floor (speed);
if (Obj.alpha = = target) {
Clearinterval (timer);
}else{
Obj.alpha = Obj.alpha + speed;
Obj.style.filter = Alpha (Opacity:obj.alpha);
Obj.style.filter = obj.alpha/100;
}
},30);
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
Javascript Multi-object transparency changes