Home > Developer > JavaScript
Example of window Jitter code implemented by javascript:
Window jitter effect in many places have applications, such as NetEase Landing window has such a effect, when landing failure will appear jitter effect, this not only has a dynamic, but also feel new, the following is a code example of this, and everyone to share.
The code is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Window Landing effect-ant tribe</title><styletype= "Text/css">#win{position:relative;width:100px;Height:100px;Background-color:#666;}</style><Scripttype= "Text/javascript"> vara=['Top',' Left'];varb=0; varu;functionFudu () {win.style[a[b%2]]=(b++)%4<2?"0px":"4px"; if(b> the) {clearinterval (U); b=0 } }functionZd () {clearinterval (U); U=setinterval (Fudu, +)} window.onload=function(){ varBT=document.getElementById ("BT"); varwin=document.getElementById ("win"); Bt.onclick=ZD;}</Script> </Head> <Body> <ButtonID= "BT">Click Vibrate</Button> <DivID= "Win"></Div> </Body> </HTML>
in the above code, when the click of the button, Div will appear jitter effect, of course, this effect is relatively simple, here is only a demonstration, in the actual application can be extended, the following simple introduction to the implementation process.
I. Principle of implementation:
the code is simple and the principle is very simple. Div is relative positioning, when the button is clicked, the Timer function setinterval () constantly call the Fudu () function, this function can be modeled to constantly set the left or top property values, that is, constantly randomly adjust the position of the Div, This results in a jitter effect that stops jitter when the value of B is greater than 15.
two. Code comments:
1.var a=[' top ', ' left ', declares an array with top and left strings stored inside.
2.var b=0, declares a variable B and assigns a value of 0.
3.var u, declare a variable as the return value of the timer function setinterval ().
4.function Fudu () {}, declares a function.
5.win.style[a[b%2]]= (b++)%4<2? " 0px ":" 4px ", this code is the core part, the value of the b%2 modulo operation is 0 or 1, so that it becomes the index value of array A to get the value in the array. Style[a[b%] The effect of this form is the same as that of Style.top. ]]= (b++)%4<2? " 0px ":" 4px "so that the top and left properties of the div are assigned values by determining whether the value is less than 2 by modulo.
6.if (b>15) {clearinterval (U); b=0}, if the value of B is greater than 15, then the jitter is stopped and the value of B is reset to 0.
7.function Zd () {}, declares a function.
8.clearInterval (U), stop timer function run, this code is to prevent the continuous click button Jitter may not stop the problem, because two jitter affects each other.
9.u=setinterval (fudu,30), the Fudu function is constantly called using the timer function.
10.window.onload=function () {}, when the contents of the document are fully loaded and then execute the code in the function.
11.var Bt=document.getelementbyid ("BT"), Gets the button object.
12.var Win=document.getelementbyid ("Win"), gets the div object.
13.bt.onclick=zd, register the event handler for the button.
three. Related reading:
The 1.setInterval () function can be found in the setinterval () Function usage section.
the 2.clearInterval () function can be found in the Clearinterval () Method section of the Window object .
3. Three operators can refer toAn explanation of ternary operator usagea chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=8896
For more information, refer to: http://www.softwhy.com/javascript/
Example of window Jitter code implemented by JavaScript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
