Analysis of simultaneous motion implementation methods and JS Special Effects

Analysis of simultaneous motion implementation methods and JS Special Effects

This article describes how to implement simultaneous motion of JS motion effects. We will share this with you for your reference. The details are as follows:

Next, the previous article "chain movement of JS motion effects" continues to be tossed

In the previous article, our motion frame can be perfectly implemented to increase the width, height, and transparency of an object. It seems perfect!

It seems that you can have tea and see the beauty. But the boss suddenly said, It is heartbroken to change the width and transparency of an object at the same time !!!

After reading the previous motion frame, we found that it is impossible to make the div wider and higher at the same time, and make the div more transparent !! Finally, I can't do anything. I have to ask the JSON experts for help. If I don't know json, I 'd like to ask du Niang!

function startMove(obj,attr,iTarget,fn)

In the previous startMove () function, an attr attribute is passed in. When an iTarget target value is passed in, but after we have a JSON artifact, we can put the attribute and target value in JSON, thenIn startMove, only json is input to replace the previous attr and iTarget.,

For example, if we want to change the width, height, and transparency, put them in JSON: {width: 300, height: 300, opacity: 30}

Then we can use for .. in to traverse the json to get the corresponding attributes and values. How can we modify the values in the motion frame program ??

The following is a simple test description of json

<Script> var json = {width: 200, height: 300, opacity: 30}; for (attr in json) {alert ("attribute is: "+ attr +" -- target value "+ json [attr]);} </script>

As shown in the preceding pop-up results, the widht, height, and opacity values in json are the corresponding attribute names. For 200,300 and 30, the target value is used to traverse the json object, it can be seen that attr corresponds to each attribute name, while json [attr] corresponds to each target value. You should understand how to modify it here!

1. Firstfunction startMove(obj,attr,iTarget,fn)In attr, iTarget is killed, and a json object is passed in.

function startMove(obj,json,fn)

2. traverse the json file in the timer to see which attributes need to be changed.

Function startMove (obj, json, fn) {// fn: The clearInterval (obj. timer); obj. timer = setInterval (function () {for (key in json ){//... replace the previously passed attribute with the key, and json [atrr] replaces the previous target value // that is, rewrite the attr in the previous startMove function to the key, iTarget is rewritten to json [atrr] // However, to make it easier to directly change the key name in for in to attr, for (attr in json) in this way, do not rewrite the attr in startMove one by one to save trouble}, 30 );}

The complete test code is as follows:

HTML section:

<div id="div1"></div>

Css section:

<style>    #div1{      width: 200px;height: 200px;      background: green;    }</style>

Js section:

<Script> window. onload = function () {var oDiv = document. getElementById ('div1 '); oDiv. onmouseover = function () {startMove (oDiv, {width: 300, height: 300, opacity: 30});} oDiv. onmouseout = function () {startMove (oDiv, {width: 200, height: 200, opacity: 100}) ;}} function getStyle (obj, attr) {return getComputedStyle? GetComputedStyle (obj, false) [attr]: obj. currentStyle [attr];} function startMove (obj, json, fn) {// json replaces the original attr and iTarger parameters clearInterval (obj. timer); obj. timer = setInterval (function () {for (attr in json) {var objAttr = 0; if (attr = "opacity ") {// because the key name in for in is attr, you do not need to replace objAttr = Math here. round (parseFloat (getStyle (obj, attr) * 100);} else {objAttr = parseInt (getStyle (obj, attr);} var iSpeed = (js On [attr]-objAttr)/10; // replace it with json [attr] iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (objAttr = json [attr]) {clearInterval (obj. timer); if (fn) {// if the "next moving function" is passed, execute fn () ;}} else {if (attr = "opacity ") {obj. style. filter = 'Alpha (opacity: '+ (objAttr + iSpeed) +') '; obj. style. opacity = (objAttr + iSpeed)/100;} else {obj. style [attr] = objAttr + iSpeed + 'px ';}}, 30) ;}</script>

Here our motion frame is almost perfect, but there is still a small problem. What is the problem? Continue next time