HTML + JavaScript implement chain motion effects

HTML + JavaScript implement chain motion effects

In the process of learning js, I found this guy is really good at doing special effects. Although the current level is not enough, it can also write some simple results. Today, I will share a simple motion frame and use it to implement simple chain motion effects.

1. move. js

In the motion frame, the length and width changes and the transparency changes. The variation of length and width can achieve the effect of DIV volume movement change. Transparency is mainly used to add the effect of fade in and out in the move-in event. I encapsulated this simple motion framework into a separate js file for convenient calling.

First look at the Code:

// Function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, false) [name] ;}// four parameters are respectively object, attribute, modification value, function startMove (obj, attr, iTarget, func) {clearInterval (obj. timer); obj. timer = setInterval (function () {var cur = 0; // determines whether the attribute to be changed is transparent if (attr = 'opacity ') {cur = parseFloat (getStyle (obj, attr) * 100);} else {cur = parseInt (getStyle (obj, attr);} // var spee for motion speed calculation D = (iTarget-cur)/6; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (cur = iTarget) {clearInterval (obj. timer); // if a function parameter exists, the execution function if (func) {func () ;}} else {if (attr = 'opacity ') {// ensure compatibility between IE and FF. obj. style. filter = 'Alpha (opacity: '+ (cur + speed) +') '; obj. style. opacity = (cur + speed)/100;} else {obj. style [attr] = cur + speed + 'px ';}}, 30 );}

2.index.html

 <script src="move.js"></script><script>window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmouseover=function (){startMove(oDiv,'width',300,function(){startMove(oDiv,'height',300,function(){startMove(oDiv,'opacity',100);});});}; oDiv.onmouseout=function (){startMove(oDiv,'opacity',30,function(){startMove(oDiv,'height',100,function(){startMove(oDiv,'width',100);});});};};</script>

In mouseover: first, change the width of the DIV and wait until the motion ends. Then, the height is changed, and the opacity is changed.

In mouseout: The opacity changes first, the height changes, and the width changes. That is, the movement order of the migration event is the opposite. (This instance has no direct application significance, but some common special effects can be made after the motion frame is improved)

The use of startMove () is similar to recursive call, but it is much easier to understand.

3. Summary

Although the motion framework only has dozens of lines of code, there are still a lot of details. If you use this framework, you should sort out the logic of the code before using it. Otherwise, a bug is enough. Fortunately, I wrote the annotations clearly, hoping to help people who need them.

The previous two motion pictures:

(Ignore watermark)

The specific exercise process should be practiced by yourself. If you make some modifications, the effect will certainly be doubled.