JS advanced motion instance analysis and js instance analysis

Source: Internet
Author: User

JS advanced motion instance analysis and js instance analysis

This article analyzes the JS advanced motion. We will share this with you for your reference. The details are as follows:

I. Chain motion frame

1. He needs a callback function to start the next motion (execute the function) when the motion stops)

The motion frame of multiple objects is changed to the following:

function startMove(obj,attr,iTarget,fn){...  if(iCur==iTarget){    clearInterval(obj.timer);    fn();  }...};

Then you can use it, for example, first increase the width, then increase the transparency, and then change the transparency.

startMove(this,'width',300,function(){  startMove(this,'height',300,function(){    startMove(this,'opacity',100);  });});

Ii. Perfect motion frame

1. Defects of the original multi-object motion frame

For example, to change the width and height to 300 at the same time, write as follows:

startMove(this,'width',300);startMove(this,'height',300);

Problem: only the height is changed to 300 (because a timer will be enabled when the width is ready for motion. Before the timer starts motion, the timer will be shut down when the height change is executed)

2. for in

For (I = 0; I <= arr. length; I ++) and for (I in arr) have the same effect

① When to use for and when to use for... in?

Array: Json can be used for both. Json can only be used for... in (because the Json subscript is irregular and there is no length)

For arrays, The for... in loop is not flexible, because the for loop can start from 1 to any number such as 2, and for... in a loop is all

② For in small applications

function setStyle(obj,attr,value){  obj.style[attr]=value;};setStyle(oDiv,'width','300px');setStyle(oDiv,'height','300px');setStyle(oDiv,'background','green');

====>

function setStyle(obj,json){  var attr='';  for(attr in json){    obj.style[attr]=json[attr];  }};setStyle(oDiv,{width:'300px',height:'300px',background:'green'});

③ Improved multi-object motion frame

Function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {for (var attr in json) {if (attr = 'opacity ') {var iCur = parseInt (parseFloat (getStyle (obj, attr )) * 100);} else {var iCur = parseInt (getStyle (obj, attr);} var iSpeed = (json [attr]-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur = json [attr]) {clearInterval (obj. timer); if (fn) {fn (); // this parameter is executed only when a function is passed. Otherwise, an error occurs.} else {if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px '}}, 30 );};

There is another problem.

if(iCur==json[attr]){  clearInterval(obj.timer);}

The timer stops as long as any value in json reaches the target.

For example, if I change the width to 103 and the height to 300, the height will stop when it reaches 300.

Solution

Function startMove (obj, json, fn) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; // define a value first. Assume that all values are in for (var attr in json) {if (attr = 'opacity ') {var iCur = parseInt (parseFloat (getStyle (obj, attr) * 100 );} else {var iCur = parseInt (getStyle (obj, attr);} var iSpeed = (json [attr]-iCur)/8; iSpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed); if (iCur! = Json [attr]) {bStop = false; // if not all values are reached, set bStop to false} if (attr = 'opacity ') {obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) +') '; obj. style. opacity = (iCur + iSpeed)/100 ;}else {obj. style [attr] = iCur + iSpeed + 'px '} if (bStop) {// All values have arrived, disable the timer clearInterval (obj. timer); if (fn) {fn (); // this parameter is executed only when a function is passed. Otherwise, an error will occur. }}, 30 );};

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.