<!DOCTYPE HTML><HTMLLang= "zh"><Head> <MetaCharSet= "UTF-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" /> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" /> <title>Document</title></Head><style>Div{width:200px;Height:200px;margin:20px;float: Left;Background-color:Red;Filter:Alpha (opacity:30);Opacity:0.3;} </style><Body> <Div></Div> <Div></Div> <Div></Div> <Div></Div> </Body><Scripttype= "Text/javascript"src= "Jquery.js"></Script><Scripttype= "Text/javascript">window.onload=function(){ varOdiv=document.getElementsByTagName ('Div'); for(varI=0; I<Odiv.length;i++) {Odiv[i].alpha= -; Odiv[i].onmouseover=function() {Startmove ( This, -); }; Odiv[i].onmouseout=function() {Startmove ( This, -); }; } }; functionStartmove (obj,itarget) {clearinterval (Obj.timer); Obj.timer=SetInterval (function(){ var Speed=(ITarget-Obj.alpha)/6; Speed= Speed>0?Math.ceil (Speed): Math.floor (speed); if(Obj.alpha==itarget) {clearinterval (Obj.timer); }Else{Obj.alpha+=Speed ; Obj.style.filter='Alpha (opacity:'+Obj.alpha+')'; Obj.style.opacity=Obj.alpha/; } }, -); } </Script></HTML>
The fade and fade effect of JS multi-Object motion