Home > Developer > JavaScript
It is a good habit to analyze other people's code implementation during the learning process. Even if you don't understand it very well, it is also a good thing to feel like you have to repeat the code several times. The following figure shows the actual results (I usually only test it in firefox ):
When the mouse slides over the navigation link above, the image in the following box is smoothly switched to move the left and right
The html structure is as follows:
Copy codeThe Code is as follows:
<Body>
<H1> Web Design <P> These are the things you shoshould know. </p>
<Ol id = "linklist">
<Li>
<A href = "structure.html"> Structure </a>
</Li>
<Li>
<A href = "presentation.html"> Presentation </a>
</Li>
<Li>
<A href = "behavior.html"> Behavior </a>
</Li>
</Ol>
</Body>
It's really easy. Let's take a look at the js Code. We will first provide two helper functions:
AddLoadEvent
Copy codeThe Code is as follows:
Function addLoadEvent (func ){
Var oldonload = window. onload;
If (typeof window. onload! = "Function "){
Window. onload = func;
} Else {
Window. onload = function (){
Oldonload ();
Func ();
}
}
}
As the name suggests, this function is the method to handle the onload event of loading windows.
InsertAfter
Copy codeThe Code is as follows:
Function insertAfter (newElement, targetElement ){
Var parent = targetElement. parentNode;
If (parent. lastChild = targetElement ){
Parent. appendChild (newElement );
} Else {
Parent. insertBefore (newElement, targetElement. nextSibling );
}
}
There is an insertBefore In the dom api, but there is no insertAfter, so here we define an insertAfter method, as long as we know that the appendChild and insertBefore functions are well understood, so we can insert newElement before targetElement.
Next, the moveElement function is very core:
MoveElement
Copy codeThe Code is as follows:
Function moveElement (elementID, final_x, final_y, interval ){
If (! Document. getElementById) return false;
If (! Document. getElementById (elementID) return false;
Var elem = document. getElementById (elementID );
If (elem. movement ){
ClearTimeout (elem. movement );
}
If (! Elem. style. left ){
Elem. style. left = "0px ";
}
If (! Elem. style. top ){
Elem. style. top = "0px ";
}
Var xpos = parseInt (elem. style. left );
Var ypos = parseInt (elem. style. top );
If (xpos = final_x & ypos = final_y ){
Return true;
}
If (xpos <final_x ){
Var dist = Math. ceil (final_x-xpos)/10 );
Xpos = xpos + dist;
}
If (xpos> final_x ){
Var dist = Math. ceil (xpos-final_x)/10 );
Xpos = xpos-dist;
}
If (ypos <final_y ){
Var dist = Math. ceil (final_y-ypos)/10 );
Ypos = ypos + dist;
}
If (ypos> final_y ){
Var dist = Math. ceil (ypos-final_y)/10 );
Ypos = ypos-dist;
}
Elem. style. left = xpos + "px ";
Elem. style. top = ypos + "px ";
Var repeat = "moveElement ('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")";
Elem. movement = setTimeout (repeat, interval );
}
Final_x and final_y are the left and top values of the element to be moved. Therefore, you must set the position attribute ("relative" or "position") for the element to be moved, so that its left, the top attribute will take effect. This function is not difficult, that is, to obtain the current left and top values of the element, compare them with final_x and final_y, and then change the left and top values according to a certain step, each step is the dist variable in each if, because each dist is calculated based on the latest left and top of the moved element, there is a moving Effect of accelerating first and slowing down. The parameter is interval, work with setTimeout to allow moveElement to call itself until the elements are moved to final_x and final_y.
Next, the pepareSlideshow function dynamically creates the required dom elements:
PrepareSlideshow
Copy codeThe Code is as follows:
Function prepareSlideshow (){
// Make sure that the browser can understand the DOM API
If (! Document. getElementsByTagName) return false;
If (! Document. getElementById) return false;
// Make sure the element already exists
If (! Document. getElementById ("linklist") return false;
Var slideshow = document. createElement ("div ");
/* If you set these attributes in css, save
Slideshow. style. position = "relative ";
Slideshow. style. overflow = "hidden ";
Slideshow. style. width = "100px ";
Slideshow. style. height = "100px ";
*/
Slideshow. setAttribute ("id", "slideshow ");
Var preview = document. createElement ("img ");
/* If it is set in css, save
Preview. style. position = "absolute ";
*/
Preview. setAttribute ("src", "slideshow/topics.gif ");
Preview. setAttribute ("alt", "building blocks of web design ");
Preview. setAttribute ("id", "preview ");
Slideshow. appendChild (preview );
Var list = document. getElementById ("linklist ");
InsertAfter (slideshow, list );
// Obtain all elements a of ol.
Var links = list. getElementsByTagName ("");
// Attaches the moveElement method to the mouseover event of each.
Links [0]. onmouseover = function (){
MoveElement ("preview",-100, 0, 10 );
}
Links [1]. onmouseover = function (){
MoveElement ("preview",-200, 0, 10 );
}
Links [2]. onmouseover = function (){
MoveElement ("preview",-300, 0, 10 );
}
}
This involves creating some elements, setting element attributes, and other basic DOM APIs, add the moveElement method corresponding to the moveover event to element a in ol [id = "linklist"], and use addLoadEvent (prepareSlideshow, this function is also well understood.
Code package download http://www.jb51.net/jiaoben/27501.html
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
