Learning the process of more analysis of other people's code to achieve is a good habit, even if not very clear, and then knock a few times code is very training to feel things. The following are the actual effects (typically I only Test in Firefox):
When the mouse over the navigation link above the picture in the box below the smooth switch, the effect of moving left and right
The HTML structure is as follows:
Copy Code code as follows:
<body>
<p>these are the things you should 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 simple. Here we look directly at the JS code, first given two auxiliary functions:
Addloadevent
Copy Code code as follows:
function Addloadevent (func) {
var oldonload = window.onload;
if (typeof window.onload!= "function") {
Window.onload = func;
} else {
Window.onload = function () {
Oldonload ();
Func ();
}
}
}
This function, by definition, is the method that loads the OnLoad event of the window
InsertAfter
Copy Code code 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 a insertbefore in the DOM API but no InsertAfter, so here's a custom InsertAfter method, as long as it's clear that the appendchild and InsertBefore functions are well understood, Insert the newelement before the targetelement.
The next moveelement function is very central:
Moveelement
Copy Code code 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, final_y the left and top values for the element move terminated, so the moved element has to set the Position property ("relative" or "position") so that its left,top properties work, and this function is not difficult, is to get the current left and top values of the element and then compare it to the final_x,final_y, then change the left and top in a certain step, each step is the dist variable in each if, because each dist will be based on the newest left of the element being moved, Top calculation, so there is a first acceleration after the deceleration of the moving effect, parameter interval, and settimeout coordination let moveelement call themselves, until the element moved to Final_x and final_y.
Next is the Pepareslideshow function, which creates the required DOM elements dynamically:
Prepareslideshow
Copy Code code as follows:
function Prepareslideshow () {
Make sure the browser understands the DOM API
if (!document.getelementsbytagname) return false;
if (!document.getelementbyid) return false;
Make sure that the element already exists
if (!document.getelementbyid ("linklist")) return false;
var slideshow = document.createelement ("div");
/* If you set these properties in CSS, you can 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 set in CSS, this can 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);
Get all the A elements in OL
var links = list.getelementsbytagname ("a");
Attach the Moveelement method to the MouseOver event for each a
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);
}
}
It also involves the creation of elements, the setting of element attributes, and the use of basic DOM APIs, and then the Moveelement method for attaching the mouse Moveover event to the A element in ol[id= "Linklist". Finally, with Addloadevent (prepareslideshow) on the line, combined with HTML and effect diagram, this function is also very well understood.
Code package Download http://www.jb51.net/jiaoben/27501.html
