JS Motion-Simultaneous motion

Then the last article "JS Sports-chain movement" continue to toss

Our motion framework in the previous article can be perfectly implemented so that an object becomes wider, higher, and more transparent ... it looks perfect!

Looks like can drink tea to see the beautiful woman. But the boss suddenly said, let you change the width and transparency of an object at the same time, heart-broken a ground!!!

Take the previous motion frame found, can not be achieved to make div at the same time to become wider, and become taller, have a change of transparency!! Finally powerless, had to please the json big God appeared, do not know the JSON of small partners to find degrees Niang ask!

function Startmove (OBJ,ATTR,ITARGET,FN)

before theStartmove ()in the functionis to pass in aattrproperty, passing in aITargettarget value, but we have aJSONafter this artifact, we can put the attributes and target values, pair pairs inJSON, and then startmove only The JSON to replace the previous attr and itarget ,

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

Then use for. In traversing this JSON can get the corresponding properties and values, then in the motion framework program how to modify that??

Just a simple test to illustrate the JSON

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

With the above pop-up results can be seen, JSON widht,height,opacity is the corresponding property name, 200,300,30 for the target value, traverse the JSON object, you can see attr is corresponding to the name of each property, and Json[attr] On the corresponding target values, see here should probably understand how to modify it!

1. First Attr,itarget in function Startmove (OBJ,ATTR,ITARGET,FN), pass in a JSON object

function Startmove (OBJ,JSON,FN)

2. Then walk through the JSON in the timer to see which attributes need to change

function Startmove (OBJ,JSON,FN) {//fn: Functions that perform the next motion            clearinterval (obj.timer);            Obj.timer = setinterval (function () {for              (key in JSON) {                //... Replace the previously passed property with key, JSON[ATRR] instead of the previous target value <span style= "White-space:pre" ></span>// That is, the attr in the previous Startmove function is rewritten as key,itarget rewritten to Json[atrr]<span style= "White-space:pre" ></span>// But in order to facilitate the name of the key in the right to rewrite directly into attr, for (attr  in JSON) so do not rewrite Startmove attr, Easy              }            },30);}

The complete test code is as follows:

<div id= "Div1" ></div>

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

<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 instead of 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 the for in is attr, there is no need to replace objattr = Math.Round (parsefloat (GetStyle (obj,a                  TTR)) *100);                  }else{objattr = parseint (GetStyle (obj,attr)); } var ISpeed = (Json[attr]-objattr)/10;//replaced by the previous itarget json[attr] ispeed = ispeed>0?                  Math.ceil (ispeed): Math.floor (Ispeed);                      if (objattr = = Json[attr]) {clearinterval (Obj.timer);                      if (FN) {//if "Next motion function" is passed, FN () is executed; }}else{if (attr = = "Opacity") {Obj.style.filter = ' alpha (o                          Pacity: ' + (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's a small problem, what's the problem? Continue Next

JS Motion-Simultaneous motion