Js animation Learning (4)

The previous section describes how to independently change a single attribute. Starting from this section, we will introduce multiple attribute encapsulation functions. A function can change multiple attribute values. VII. Multi-attribute encapsulation Functions



The previous section describes how to independently change a single attribute. Starting from this section, we will introduce multiple attribute encapsulation functions. A function can change multiple attribute values.

First, we will introduce a very important function getStyle (), which returns the current attribute value of an element. The two parameters are element and attribute. Pay attention to browser compatibility issues.

// Obtain the special encapsulation function of the element style and return the current value of this attribute. function getStyle (obj, attr) {if (obj. currentStyle) {// IE browser return obj. currentStyle [attr];} else {return getComputedStyle (obj, false) [attr]; // Firefox browser }}

Next we will focus on a function to implement animation that changes multiple attributes:

// Multiple objects change the style (width, height, font size, border, etc., transparency needs to be analyzed separately) Speed Buffer encapsulation function startMove (obj, attr, target) {// element, changed the style attribute to reach the target value clearInterval (obj. timer); // first clear the timer obj. timer = setInterval (function () {// 1. take the current value var icur = 0; // icur returns the size of the object style attribute value if (attr = 'opacity ') {// if the attribute is transparent, the return value of transparency is the decimal point of the zero point icur = Math. round (parseFloat (getStyle (obj, attr) * 100); // The round function prevents the opacity from beating back and forth between decimal places} else {icur = parseInt (getStyle (obj, attr);} // 2. calculation speed var speed = (target -Icur)/8; // the denominator is the proportional coefficient K, adjustable speed = speed> 0? Math. ceil (speed): Math. floor (speed); // The buffer speed should be rounded up, otherwise it will stop when the end point is not moved. // 3. checks whether the motion stops if (icur = target) {clearInterval (obj. timer);} else {if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (icur + speed) +') '; // IE browser obj. style. opacity = (icur + speed)/100; // Firefox} else {obj. style [attr] = icur + speed + 'px ';}}, 30 )}

We use two p to verify: