Html+javascript for chain motion effects

In the process of learning JS, it is good to find this guy do special effects, although the current level is not enough, but also can write some simple effect.

Share a simple motion framework today. Then use this framework to achieve a simple chain-motion effect.

1.move.js

In the motion frame. Major changes in length and width and transparency. The change of length and width can realize the effect of the volume motion of Div. Transparency is mainly the effect of adding a fade in the mouse move-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, attribute, change 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;" >//infers 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 are function parameters. Then run the function </span>if (F<span style= "font-family:kaiti_gb2312;" >unc</span>) {<span style= "font-family:kaiti_gb2312;" > </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 opposite of the sequence of moving events. (There is no direct application to this instance, but some of the most common effects can be made when the motion frame is in good condition.)
During the use of Startmove (). There is a feeling similar to recursive invocation. It's just that it's a lot better understood.
3. Summary
Although the motion framework has only dozens of lines of code, the details are quite numerous. Let's say that the students who work with this framework have the logic to tidy up the code first. Or else there's a bug. And it's really abusive. Fortunately, I wrote the gaze very clearly, hoping to help the people who need it.
Top two pictures before and after the movement:
(Ignore watermark)
The detailed movement process is also a good practice, and then a little modification. The effect is certainly doubly.
 
Html+javascript for chain motion effects