Js animation Learning (5)

In the previous example, each attribute is moved independently. What if you want to move multiple attributes at the same time? For example, I want to change the width and height of a div onmouseover event at the same time. The following function is used to change the width separately: 9. Multiple Attributes are simultaneously moved.



In the previous example, each attribute is moved independently. What if you want to move multiple attributes at the same time? For example, I want to change the width and height of a p onmouseover event simultaneously. The following function is used to increase the width separately:

window.onload=function(){var ob1=document.getElementById('p1');ob1.onmouseover=function(){startMove(ob1,'width',400);}}

One idea is to add a startMove under startMove:

window.onload=function(){var ob1=document.getElementById('p1');ob1.onmouseover=function(){startMove(ob1,'width',400);　　　　　 startMove(ob1,'height',400);}}

It turns out that this idea is wrong. Such writing only changes in height, but does not change in width. Why? Because the startMove function is to disable the timer at the beginning, when the first startMove function is just started, the second startMove function has started to be executed, the shutdown timer function of the second startMove overwrites the timer of the first startMove, so the width of the object cannot be changed. How can this problem be solved? Json is used here:

var json={a:12,b:13};for(var i in json){alert(i);alert(json[i]);}

The values in json are paired, each of which is the values of the variables and variables. You can use the for in loop to obtain each pair of variables and corresponding values. The above program pops up a, 12, B, 13 in sequence.

Next, let's take a look at the stareMove framework and find that the "attribute" and "target value" in the parameter are a pair of values. That is to say, a startMove can only change one value. How can I change the value of multiple pairs? Let's take a look at startMove like this:

StartMove (obj, {attr1: target1, attr2: target2}, fn), the blue part is in the json format, so on the basis of the original startMove, replace the blue part with json; replace the target in the program with json [attr] (which attribute is the target value of that attribute ). The changed startMove function is as follows: (changes were made in rows 1, 4, 13, and 16)

Function startMove (obj, json, fn) {// element, changed style attribute, reached target value, callback function clearInterval (obj. timer); obj. timer = setInterval (function () {for (var attr in json) {// 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 = (json [attr]-icur)/8; // the denominator is the proportional coefficient K, which can be Tune 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. check whether the motion stops if (icur = json [attr]) {clearInterval (obj. timer); if (fn) {// determine whether there is another motion fn () after the previous motion stops;} 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 )}

The following is a result of p calling the startMove function to change the width and height at the same time: