Home > Developer > JavaScript
In the previous essay, we described how to modify the central style information of the document with Dom technology, and the use of JavaScript to add style information can save us time and effort, but in general, CSS is still the best tool to accomplish such tasks. But there is one area of application where the current CSS is powerless. if we want to change the style of an element over time, we can only use JavaScript. JavaScript can call a function repeatedly at a predetermined interval of time, which means that we can change the style of an element over time.
Animation is one of the perfect examples of how styles change over time. Simply put, the animation is to make the position of the element changing with time. The following is a basic knowledge of several HTML that you must master to use JavaScript animations:
First, Position
The position of the page element in the browser window is a representation of the information. Therefore, location information is usually set using CSS. The following CSS code makes a reservation about the location of an element on a Web page:
element {position:absolute; top:50px; Left:100px;}The legal value of the Position property is static, absolute, relative, fixed four.
1. Static is the default value of the Position property, meaning that the elements will appear in the browser window in the order in which they appear in the tag.
2, relative meaning and static similar, the difference is that the Postion property is relative element can also (by applying the float property) from the normal display order of the document out.
3. If the position property of an element is set to absolute, we can place it anywhere in the "container" that holds it. This container is either the document itself or a parent element with a fixed or absolute attribute. His display position is determined by the top, left, right, bottom four properties and independent of where he is in the document.
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title></title> <styletype= "Text/css"> </style></Head><Body> <PID= "message">whee!</P><!--(So excited, so excited, AH)! - <Scripttype= "Text/javascript"> //use JS to set the initial display position of <p> tags functionPositionmessage () {if (!checkcompatibility)return; varEle=document.getElementById ("message"); Ele.style.position= "Absolute"; Ele.style.top= "100px"; Ele.style.left= "50px"; } //change the display position of the <p> label through the style property functionMovemessage () {varEle=document.getElementById ("message"); Ele.style.left= "200px"; } varloadeventlist=[Positionmessage, Movemessage]; Addonloadeventlist (loadeventlist); //an array of window.onload event binding functions is called when the page is all added . functionaddonloadeventlist (eventlist) {if (!eventlist)return false; varOldonload=window.onload; Window.onload= function () { for (varI= 0; I<eventlist.length; I++) {eventlist[i] (); } } } //Check Browser support for DOM methods functioncheckcompatibility () {if (!document.getElementById)return false; if (!document.createelement)return false; if (!document.createTextNode)return false; if (!document.getelementsbytagname)return false; if (!document.getelementsbyname)return false; return true; } </Script></Body></HTML>
The above code, we do not see any animation effect, because our javascript is too efficient; the function executes one after the other. There is no interval at all that we can perceive.
So in order to achieve animation, we must create a time interval, and this is the key to achieve the animation effect! So let's say next time animation effect of the second feature time!
Second, time
1, Settimeut () function He was able to allow a function to start executing after a predetermined amount of time. This function has two parameters: the first argument is a string whose content is the name of the function that will be executed. The second parameter is a numeric value that sets the function in milliseconds for how long it takes to start executing the first argument.
SetTimeout ("Functionexample", Interval) //interval time interval is a numeric valueBut this function, named Functionexample, will always be called without stopping, so the correct code should write this, unless you are going to keep him from being called!
var para=settimeout ("Functionexample", interval);
This assigns a call to the Functionexample function to the para variable, so that if we want to cancel a function that is waiting to be executed, we can do so.
Cleartimeout (para);
JavaScript js for animated effects
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
