Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>links FX - Interactive DHTML art-demos</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <style type="text/css"> |
| body { |
| background-color: #fff; |
| font-family: arial, verdana, helvetica, sans-serif; |
| font-size:12px; |
| } |
| a { |
| text-decoration: none; |
| font-family: 'courier new', typewriter, matrix, monospace; |
| font-size:12px; |
| white-space: nowrap; |
| color: #00f; |
| } |
| .list { |
| float: left; |
| background-color: #eee; |
| margin: 10px; |
| width: 150px; |
| } |
| .list div { |
| line-height: 1em; |
| margin-left: 20px; |
| } |
| .list h3 { |
| text-align: center; |
| font-weight: normal; |
| } |
| </style> |
| <script type="text/javascript"> |
| // =============================================================== |
| // ----- airport-style display FX ------ |
| // script written by Gerard Ferrandez - Ge-1-doot - December 2005 |
| // http://www.dhteumeuleu.com |
| // updated: February 2010 - standard mode - namespaced |
| // =============================================================== |
| // |
| var linkFX = function () { |
| var O = []; |
| var P,T,tag; |
| ////////////////////////////////////////////////////////////////////// |
| var car = "-------------------- 0123456789abcdefghijklmnopqrstuvwxyz"; |
| ////////////////////////////////////////////////////////////////////// |
| var L = car.length; |
| var Olink = function (o){ |
| this.o = o; |
| this.txt = P[o].innerHTML; |
| P[o].innerHTML = ""; |
| this.obj = P[o]; |
| this.len = this.txt.length; |
| this.txa = ""; |
| this.txo = ""; |
| this.run = false; |
| this.stop = false; |
| this.cp = []; |
| P[o].onmouseover = function(){ |
| O[o].over(); |
| return false; |
| } |
| P[o].onmousedown = function() { |
| O[o].stop = true; |
| setTimeout(function() { |
| P[o].innerHTML=O[o].txt; |
| O[o].stop=false; |
| }, 1000); |
| return false; |
| } |
| this.display = function(){ |
| if(!this.stop){ |
| this.run = false; |
| for(var i=0;i<this.len;i++){ |
| var c = this.txa.charAt(i); |
| var d = this.txt.charAt(i); |
| if(c != d){ |
| this.cp[i]++; |
| this.run = true; |
| c = car.charAt(this.cp[i]); |
| if(this.cp[i] >= L) c=d; |
| this.txa = this.txa.substring(0,i)+c+this.txa.substring(i+1,999); |
| } |
| } |
| this.obj.childNodes[0].nodeValue = this.txa; |
| if(this.run) setTimeout(function() { |
| O[o].display(); |
| }, 32); |
| } else { |
| this.run = false; |
| this.txa = txt; |
| } |
| } |
| this.over = function(){ |
| this.txa=""; |
| for(var i=0;i<this.len;i++){ |
| this.cp[i] = Math.round(Math.random()*20); |
| this.txa += car.charAt(this.cp[i]); |
| } |
| this.obj.innerHTML = this.txa; |
| if(!this.run) this.display(); |
| } |
| setTimeout(function() { |
| O[o].over(); |
| }, o*16); |
| } |
| //////////////////////////////////////////////////////////// |
| var init = function (t) { |
| tag = t; |
| P = document.body.getElementsByTagName(tag); |
| T = P.length; |
| for (var i=0;i<T;i++) O[i] = new Olink(i); |
| } |
| //////////////////////////////////////////////////////////// |
| return { |
| init : init |
| } |
| }(); |
| onload = function(){ |
| linkFX.init('a'); |
| } |
| </script> |
| </head> |
| <body> |
| <a href="http://del.icio.us/">del.icio.us</a> / dhtml<br> |
| <div class="list"> |
| <h3>common tags</h3> |
| <div><a href="http://del.icio.us/tag/scripting">scripting</a></div> |
| <div><a href="http://del.icio.us/tag/javascript">javascript</a></div> |
| <div><a href="http://del.icio.us/tag/web">web</a></div> |
| <div><a href="http://del.icio.us/tag/dhtml">dhtml</a></div> |
| <div><a href="http://del.icio.us/tag/css">css</a></div> |
| <div><a href="http://del.icio.us/tag/ajax">ajax</a></div> |
| <div><a href="http://del.icio.us/tag/programming">programming</a></div> |
| <div><a href="http://del.icio.us/tag/design">design</a></div> |
| <div><a href="http://del.icio.us/tag/webdesign">webdesign</a></div> |
| <div><a href="http://del.icio.us/tag/html">html</a></div> |
| <div><a href="http://del.icio.us/tag/dom">dom</a></div> |
| <div><a href="http://del.icio.us/tag/webdev">webdev</a></div> |
| <div><a href="http://del.icio.us/tag/reference">reference</a></div> |
| <div><a href="http://del.icio.us/tag/tools">tools</a></div> |
| <div><a href="http://del.icio.us/tag/tutorial">tutorial</a></div> |
| <div><a href="http://del.icio.us/tag/xmlhttprequest">xmlhttprequest</a></div> |
| <div><a href="http://del.icio.us/tag/menu">menu</a></div> |
| <div><a href="http://del.icio.us/tag/xml">xml</a></div> |
| <div><a href="http://del.icio.us/tag/development">development</a></div> |
| <div><a href="http://del.icio.us/tag/library">library</a></div> |
| <br> |
| </div> |
| <div class="list"> |
| <h3>common tags</h3> |
| <div><a href="http://del.icio.us/tag/php">php</a></div> |
| <div><a href="http://del.icio.us/tag/games">games</a></div> |
| <div><a href="http://del.icio.us/tag/firefox">firefox</a></div> |
| <div><a href="http://del.icio.us/tag/usability">usability</a></div> |
| <div><a href="http://del.icio.us/tag/forms">forms</a></div> |
| <div><a href="http://del.icio.us/tag/blog">blog</a></div> |
| <div><a href="http://del.icio.us/tag/prototype">prototype</a></div> |
| <div><a href="http://del.icio.us/tag/library">library</a></div> |
| <div><a href="http://del.icio.us/tag/html">html</a></div> |
| <div><a href="http://del.icio.us/tag/php">php</a></div> |
| <div><a href="http://del.icio.us/tag/framework">framework</a></div> |
| <div><a href="http://del.icio.us/tag/software">software</a></div> |
| <div><a href="http://del.icio.us/tag/java">java</a></div> |
| <div><a href="http://del.icio.us/tag/art">art</a></div> |
| <div><a href="http://del.icio.us/tag/blog">blog</a></div> |
| <div><a href="http://del.icio.us/tag/graphics">graphics</a></div> |
| <div><a href="http://del.icio.us/tag/howto">howto</a></div> |
| <div><a href="http://del.icio.us/tag/inspiration">inspiration</a></div> |
| <div><a href="http://del.icio.us/tag/xhtml">xhtml</a></div> |
| <div><a href="http://del.icio.us/tag/images">images</a></div> |
| <br> |
| </div> |
| <div class="list"> |
| <h3>common tags</h3> |
| <div><a href="http://del.icio.us/tag/photo">photo</a></div> |
| <div><a href="http://del.icio.us/tag/flash">flash</a></div> |
| <div><a href="http://del.icio.us/tag/interactive">interactive</a></div> |
| <div><a href="http://del.icio.us/tag/interface">interface</a></div> |
| <div><a href="http://del.icio.us/tag/animation">animation</a></div> |
| <div><a href="http://del.icio.us/tag/computer">computer</a></div> |
| <div><a href="http://del.icio.us/tag/modelling">modelling</a></div> |
| <div><a href="http://del.icio.us/tag/geek">geek</a></div> |
| <div><a href="http://del.icio.us/tag/mathematics">mathematics</a></div> |
| <div><a href="http://del.icio.us/tag/physics">physics</a></div> |
| <div><a href="http://del.icio.us/tag/fractals">fractals</a></div> |
| <div><a href="http://del.icio.us/tag/algorithm">algorithm</a></div> |
| <div><a href="http://del.icio.us/tag/code">code</a></div> |
| <div><a href="http://del.icio.us/tag/beauty">beauty</a></div> |
| <div><a href="http://del.icio.us/tag/creativity">creativity</a></div> |
| <div><a href="http://del.icio.us/tag/experiments">experiments</a></div> |
| <div><a href="http://del.icio.us/tag/opensource">opensource</a></div> |
| <div><a href="http://del.icio.us/tag/inspiration">inspiration</a></div> |
| <div><a href="http://del.icio.us/tag/music">music</a></div> |
| <div><a href="http://del.icio.us/tag/quotes">quotes</a></div> |
| <br> |
| </div> |
| </body> |
| </html> |
