JavaScript motion Framework for various motions of CSS2

1<script>2Window.onload =function() {3             //var oDiv1 = document.getElementById (' box1 ');4             //var oDiv2 = document.getElementById (' Box2 ');5             //odiv1.timer = null;6             varOdiv = document.getElementsByTagName (' div ');7             8              for(vari = 0; i < odiv.length; i++) {9Odiv[i].timer =NULL;TenOdiv[i].onmouseover =function() { One                     varthat = This;//closure of the relationship, the This pass the past AStartmove ( This, {' width ': 205, ' Height ': 500},function(){ -Startmove (that, {' opacity ': 100}); -                     }); the                     //Alert (GetStyle (this, ' opacity ')) -                 } -Odiv[i].onmouseout =function() { -                     varthat = This; +Startmove ( This, {' width ': $, ' height ': 200},function(){ -Startmove (that, {' opacity ': 30}); +                     }); A                 } at             } -         } -         //var timer = null; -     functionGetStyle (obj,name) {//Get style function -         if(obj.currentstyle) { -             returnObj.currentstyle[name];//The reason for this form here is that name is passed in as a string. in}Else{ -             returngetComputedStyle (obj,false) [name];//get the total width of the frame plus to         } +     } -     //Startmove (onj,{width:200, height:200}, Fnend) the     functionstartmove (obj, JSON, fnend) { * clearinterval (obj.timer); $Obj.timer = SetInterval (function() {Panax Notoginseng             varBstop =true;//after opening the timer, set up a hypothesis: all movements are stopped, and those who set assumptions outside the timer are the wrong way . -              for(varattrinchJSON) { the             varCur = 0; +             if(attr = = "Opacity"){ Acur = Math.Round (parsefloat (GetStyle (obj,attr)) * 100);//to take the entire the}Else { +Cur =parseint (GetStyle (obj,attr)) -             } $             varSpeed = (json[attr]-cur)/10;// $Speed = speed > 0?Math.ceil (Speed): Math.floor (speed); -             if(cur!== json[attr]) {//if the value of a loop is not equal to the target value, -Bstop =false;//assumptions are not established the             }; -                 if(attr = = "Opacity"){       WuyiObj.style.opacity = (speed + cur)/100; theObj.style.filter = ' alpha (opacity: ' + (speed + cur) + ') '; -}Else{ WuOBJ.STYLE[ATTR] = cur + speed + ' px '; -                 }       About         } $         if(bstop) {//all assumptions are set up before the timer is closed. - clearinterval (obj.timer); -             if(fnend) fnend ();//If there is a callback function, the rollback function is executed -         } A}, 30) +     } the</script>

HTML code

1  <div id= "Box1" ></div>2  <div id= "Box2" ></div>

CSS Code

1 Div {2        width:200px; 3         height:200px; 4         background:purple; 5 6 margin-top:10px;                   7         opacity:0.3; 8         Filter:alpha (opacity:30); 9     }

All-in-hand, pro-Test available, support multi-object, multi-attribute, chained, simultaneous motion.

JavaScript motion Framework for various motions of CSS2