Html+javascript for chain motion effects

In the process of learning JS, found this guy do special effects is very good, although said the current level is not enough, but also can write a simple effect. Share a simple motion framework today and use this framework to achieve simple chain motion effects.

1.move.js

In the framework of motion, the changes of length and width and transparency are mainly carried out. The change in length and width can achieve the change of volume motion of Div, and the transparency is mainly the effect of adding fade in the mouse moving out event. I enclose this simple motion framework in a single JS file for easy invocation.

First look at the code:

<span style= "font-family:kaiti_gb2312;" >//used to get the non-inline style </span>function GetStyle (obj,name) {if (Obj.currentstyle) {return obj.currentstyle[name];} Else{return getComputedStyle (Obj,false) [name];}} <span style= "font-family:kaiti_gb2312;" >//four parameters are object, property, modified value, function </span>function startmove (obj,attr,itarget,func) {clearinterval (obj.timer); o Bj.timer=setinterval (function () {var cur=0;<span style= "font-family:kaiti_gb2312;" >//determines whether the property to be changed is a transparency </span>if (attr== ' opacity ') {cur=parsefloat (GetStyle (obj,attr) *100);} Else{cur=parseint (GetStyle (obj,attr));} <span style= "font-family:kaiti_gb2312;" > Motion Speed Calculation </span>var speed= (itarget-cur)/6;speed=speed>0?                        Math.ceil: Math.floor (Speed), if (cur==itarget) {clearinterval (Obj.timer); <span style= "font-family:kaiti_gb2312;" >//If there is a function parameter, execute function </span>if (f<span style= "font-family:kaiti_gb2312;" >unc</span>) {<span style= "font-family:kaiti_gb2312;" > &Lt;/span>f<span style= "font-family:kaiti_gb2312;" >unc</span> ();} }else{if (attr== ' opacity ') {<span style= "font-family:kaiti_gb2312;" >//guarantee the compatibility of IE and ff </span><span style= "font-family:kaiti_gb2312;" > </span>obj.style.filter= ' alpha (opacity: ' + (cur+speed) + ') '; obj.style.opacity = (cur+speed)/100;} else{obj.style[attr]=cur+speed+ ' px ';}}},30);}

2.index.html

In mouseover: The div is changed to width, and so the motion ends. Then the height changes, and finally the opacity changes. 
In Mouseout: The advanced line opacity changes, then the height changes, and finally the width changes. is the exact opposite of the sequence of moving events. (this instance does not have a direct application meaning, but after some refinement of the motion frame you can do some common effects.)
In the process of using startmove (), there is a feeling of similar and recursive invocation, but this is much better understood.
3. Summary
Although the motion framework has only dozens of lines of code, there are a lot of details. If useful to this frame of the classmate, in the use of the first good to tidy up the logic of the Code, or out of the bug, also really enough to abuse the heart. Fortunately, I wrote the notes very clearly, hoping to help people in need.
Top two pictures before and after the movement:
(Ignore watermark)
The specific movement process is also a good practice, and then a little modification, the effect is definitely doubly.
Html+javascript for chain motion effects