JS picture fly-fly effect

Last Update:2014-07-26 Source: Internet

Author: User

Tags variable scope

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

When the mouse moves on the interface, there is a series of pictures followed by the following people fluttering together, the effect is as follows:

implementation of the basic idea : To prepare five IMG tags, in order to facilitate control are placed in a div inside, set div positioning mode is fixed, set to this positioning method is mainly in order to solve the page scroll bar in the case, the picture can also follow the mouse movement. Then when the mouse moves, the delay to each image set positioning the left and top distance is OK. The HTML and CSS code are as follows:

1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2     <Head>3         <styletype= "Text/css"rel= "stylesheet">4 Div{5 width:100px;6 Height:80px;7                     8 position:fixed;9         </style>Ten     </Head> One  A     <Body>     -             <Div><imgsrc= "Images/tianshi.gif"alt= "Angel" /></Div> -             <Div><imgsrc= "Images/tianshi.gif"alt= "Angel" /></Div> the             <Div><imgsrc= "Images/tianshi.gif"alt= "Angel" /></Div> -             <Div><imgsrc= "Images/tianshi.gif"alt= "Angel" /></Div> -             <Div><imgsrc= "Images/tianshi.gif"alt= "Angel" /></Div> -     </Body> + </HTML>

In JS, the current document object is registered to an event, the reason for registering to document instead of body is because, when the page is not content, the body is basically no size. The code is as follows:

1<script type= "Text/javascript" >2Window.onload =function(){3Document.onmousemove =function(evt) {4                 varE = EVT | |window.event;5                 //get the current coordinates of the mouse6                 varx = parseint (e.clientx) + 5;7                 vary = parseint (e.clienty) + 5;8                 //get the Div control on the page9                 varIMGs = document.getElementsByTagName (' div ');Ten  OneSetTimeout (function(){ AImgs[0].style.left = x + ' px '; -Imgs[0].style.top = y + ' px '; -},0); theSetTimeout (function(){ -                     //var j = i; -Imgs[1].style.left = x + ' px '; -Imgs[1].style.top = y + ' px '; +},50); -SetTimeout (function(){ +Imgs[2].style.left = x + ' px '; AImgs[2].style.top = y + ' px '; at},100); -SetTimeout (function(){ -Imgs[3].style.left = x + ' px '; -Imgs[3].style.top = y + ' px '; -},150); -SetTimeout (function(){ inImgs[4].style.left = x + ' px '; -Imgs[4].style.top = y + ' px '; to},200); +             }; -         } the</script>

simple and cumbersome code snippets

Through the above code basically has achieved the effect we want, but very cumbersome, if you want to add a few more pictures, you need to copy a large, but also need to calculate time, etc., but it is easier to understand.

As can be seen from the above code, in fact, each settimeout code is the same, the difference is the Imags index, and in each settimeout is passed an anonymous function. Therefore, it can be controlled by a loop, in which the settimeout is passed an anonymous function, which requires referencing an external variable. However, since the loop variable i is already 5 after the execution of the loop, and the anonymous function referencing it does not reside, then finally by giving a self-executing anonymous function to pass the argument, so that each anonymous function to the inside of the anonymous function (closure) to maintain a variable scope. The modified code is as follows:

1<script type= "Text/javascript" >2Window.onload =function(){3Document.onmousemove =function(evt) {4                 varE = EVT | |window.event;5                 //get the current coordinates of the mouse6                 varx = parseint (e.clientx) + 5;7                 vary = parseint (e.clienty) + 5;8                 //get the Div control on the page9                 varIMGs = document.getElementsByTagName (' div ');Ten                  One                  for(vari=0;i){ A                     //by passing the I in the form of a parameter, I can keep the value of each I in memory until the anonymous function of the closure does not use it . -(function(j) { -SetTimeout (function(){ theImgs[j].style.left = x + ' px '; -Imgs[j].style.top = y + ' px '; -},j*40) - }) (i); +                 }; -             }; +         } A</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More