Image switching in DOM Scripting [Compatible with Firefox]_Image special effects

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, typing the code a few more times is also a good thing to cultivate your sense. The following is the actual effect (generally I only test in firefox):

　

When the mouse slides over the navigation link above, the pictures in the box below will switch smoothly, with the effect of moving left and right

The html structure is as follows:

Copy code The code is as follows:

Web Design

These are the things you should know.

Structure


1. 
   Presentation
   


2. 
   Behavior
   

It’s really simple. Let's look directly at the js code below, first giving two auxiliary functions:
addLoadEvent

Copy code The 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 window
insertAfter

Copy the code The 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 but no insertAfter in the DOM API, so customize one here The insertAfter method is easy to understand as long as you know the appendChild and insertBefore functions. Insert newElement before targetElement.
The next moveElement function is very core:
moveElement

Copy code The 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 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 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 are respectively the left and top values ​​​​that the element movement terminates, so the moved element must set the position attribute ("relative" or "position"), so that its left and top attributes will take effect. This function It’s not difficult, just get the current left and top values ​​of the element and compare them with final_x, final_y, and then change the left and top values ​​according to a certain step size. Each step size is the dist variable in each if, because each time Each dist will be calculated based on the latest left and top of the moved element, so there is a movement effect of first accelerating and then decelerating. The parameter interval, combined with setTimeout, allows moveElement to call itself until the element moves to final_x and final_y.
Then pepareSlideshow Function, dynamically create the required dom elements:
prepareSlideshow

Copy code The code is as follows:

function prepareSlideshow() {
//Make sure 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 in css Attributes can be omitted here
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, you can omit here
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 a elements in ol
var links = list.getElementsByTagName("a");
// Attach the moveElement method to each mouseover event of 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);
}
}

This also involves the creation of some elements, setting of element attributes and other basic DOM API applications. Then add the moveElement method corresponding to the mouse moveover event to the a element in ol[id="linklist"], and finally use addLoadEvent (prepareSlideshow). This function is also easy to understand when combined with HTML and renderings.
Code package download http://www.jb51.net/jiaoben/27501.html