DHTML Utopia Modern Web Design Using JavaScript & DOM- P8

DHTML Utopia Modern Web Design Using JavaScript & DOM- P8: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- P8 Chapter 5: Animation Here’s the style sheet: File: risingTooltips.css ul, div#extra { display: block; background-color:blue; position: absolute; top: 30px; left: 0; width: 100%; height: 2em; padding: 0; margin: 0; z-index: 20; } div#extra { z-index: 10; } li { display: inline; font-weight: bold; padding: 0; margin: 0; } li a { color: white; background-color: blue; } span { position: absolute; top: 0; background: yellow; border: 1px solid blue; border-width: 1px 1px 0 1px; display: none; } Finally, here’s the script: File: risingTooltips.js var rH = { addEvent: function(elm, evType, fn, useCapture) { // addEvent cross-browser event handling for IE5+ NS6/Mozilla 120Licensed to siowchen@darke.biz Full Rising Tooltips Example Listing // By Scott Andrew 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; } }, init: function() { // get the header links if (!document.getElementsByTagName || !document.getElementById) return; var navList = document.getElementById(nav); rH.links = navList.getElementsByTagName(a); var extra = document.getElementById(extra); for (var i = 0; i < rH.links.length; i++) { // install event listeners rH.addEvent(rH.links[i], mouseover, rH.mOver, false); rH.addEvent(rH.links[i], mouseout, rH.mOut, false); // move the corresponding span into the extra div var theLi = rH.links[i].parentNode; var theSpan = theLi.getElementsByTagName(span)[0]; extra.appendChild(theSpan); theSpan.style.display = block; // remember where the span is, and whats happening rH.links[i].tipSpan = theSpan; rH.links[i].tipState = none; } setInterval(rH.moveLinks, 50); // test with 500 }, mOver: function(e) { var link; if (e && e.target) 121Licensed to siowchen@darke.biz Chapter 5: Animation link = e.target; if (window.event && window.event.srcElement) link = window.event.srcElement; if (!link) return; if (link.nodeType == 3) { link = link.parentNode; // Fix for Safari } if (link.tipState != full) { link.tipState = rising; } }, mOut: function(e) { var link; if (e && e.target) link = e.target; if (window.event && window.event.srcElement) link = window.event.srcElement; if (!link) return; if (link.nodeType == 3) { link = link.parentNode; // Fix for Safari } if (link.tipState != none) { link.tipState = falling; } }, moveLinks: function() { for (var i = 0; i < rH.links.length; i++) { var link = rH.links[i]; if (link.tipState == none || link.tipState == full) { continue; } var theSpan = link.tipSpan; var height = parseInt(theSpan.style.top); if (isNaN(height)) { height = 0; 122Licensed to siowchen@darke.biz Summary } if (link.tipS ...