DHTML Utopia Modern Web Design Using JavaScript & DOM- P7

DHTML Utopia Modern Web Design Using JavaScript & DOM- P7:In a single decade, the Web has evolved from a simple method of deliveringtechnical documents to an essential part of daily life, making and breaking relationshipsand fortunes along the way. “Looking something up on the Internet,”by which is almost always meant the Web, is now within reach of almost anyoneliving in a first-world country, and the idea of conducting conversations andbusiness (and probably orchestras) in your Web browser is no longer foreign, butpart of life....
Nội dung trích xuất từ tài liệu:
DHTML Utopia Modern Web Design Using JavaScript & DOM- P7 Chapter 5: Animation width: 20em; height: 6em; border: 3px solid red; padding: 0.5em; margin: 1em; } Home This page is a single link with a carefully styled paragraph that contains nothing. Here’s the matching script: File: cancelTips.js function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent(on + evType, fn); return r; } else { elm[on + evType] = fn; } } function init() { if (!document.getElementById) return; var mylink = document.getElementById(mylink); addEvent(mylink, mouseover, mover, false); addEvent(mylink, mouseout, mout, false); } function mover() { TIMEOUT_ID = setTimeout( document.getElementById(explain).innerHTML + = Return to the homepage, 2000); } function mout() { // put in an placeholder to clear the current content 100Licensed to siowchen@darke.biz The setTimeout Function document.getElementById(explain).innerHTML = ; clearTimeout(TIMEOUT_ID); } var TIMEOUT_ID; addEvent(window, load, init, false); We’ve got the now-familiar addEvent code, a listener initialization function, and some listeners. It’s all stuff we’ve discussed before. Let’s see what’s new. We want a link that displays descriptive text if we hover over it for a little while. We’ve chosen 2000 (2 seconds) to exaggerate the effect—normally you’d use a number like 500 (half a second). However, if we mouse away from the link before the descriptive text is displayed, we don’t want it to appear later. First, we attach mouseover and mouseout listeners to the link in the standard way. Here’s the mouseover listener: File: cancelTips.js (excerpt) function mover() { TIMEOUT_ID = setTimeout( document.getElementById(explain).innerHTML + = Return to the homepage, 2000); } The mouseover listener controls the display of the descriptive text; when we hover over the link, we start a timeout counter by passing a string to setTimeout. That string is code that will display the descriptive text, and that code will run 2000ms after we hover over the link. In the listing, we’ve chopped the string into two sections, so that it’s easy to read on the page. Next, here’s the mouseout listener. File: cancelTips.js (excerpt) function mout() { // put in an placeholder to clear the current content document.getElementById(explain).innerHTML = ; clearTimeout(TIMEOUT_ID); } If we move the mouse off the link before the 2000ms is up, we want to cancel that timeout so that the text doesn’t show. The mouseout listener cancels the 101Licensed to siowchen@darke.biz Chapter 5: Animation timeout by calling clearTimeout with the value returned from the original setTimeout call. Note that the TIMEOUT_ID variable is a global variable and is declared (with var TIMEOUT_ID) outside any functions. It’s declared globally like this because each function (mover and mout) needs access to the variable. The setInterval Function An alternative to setTimeout is setInterval. Calling setTimeout runs the code you supply once and once only; to create animation with setTimeout, the code you call should, in turn, call setTimeout again, in order to execute the next step of the animation. By contrast, setInterval calls the code every given number of milliseconds, ...