home *** CD-ROM | disk | FTP | other *** search
/ Netscape Plug-Ins Developer's Kit / Netscape_Plug-Ins_Developers_Kit.iso / DOCS / se_javas / 15EXM01.TXT < prev    next >
Encoding:
Text File  |  1996-07-08  |  7.2 KB  |  229 lines
  1. <html>
  2. <head>
  3. <title>Visual Effects</title>
  4. <script language="JavaScript">
  5. <!-- begin script
  6. var emptyFrame = '<html></html>';
  7. var hexchars = '0123456789ABCDEF';
  8. function fromHex (str) {
  9.   var high = str.charAt(0);
  10.   var low = str.charAt(1);
  11.   return (16 * hexchars.indexOf(high)) +
  12.     hexchars.indexOf(low);
  13. }
  14. function toHex (num) {
  15.   return hexchars.charAt(num >> 4) + hexchars.charAt(num & 0xF);
  16. }
  17. function Color (str) {
  18.   this.red = fromHex(str.substring(0,2));
  19.   this.green = fromHex(str.substring(2,4));
  20.   this.blue = fromHex(str.substring(4,6));
  21.   this.toString = ColorString;
  22.   return this;
  23. }
  24. function ColorString () {
  25.   return toHex(this.red) + toHex(this.green) + toHex(this.blue);
  26. }
  27. function BodyColor (bgColor,fgColor,linkColor,vlinkColor,alinkColor) {
  28.   this.bgColor = bgColor;
  29.   this.fgColor = fgColor;
  30.   this.linkColor = linkColor;
  31.   this.vlinkColor = vlinkColor;
  32.   this.alinkColor = alinkColor;
  33.   this.toString = BodyColorString;
  34.   return this;
  35. }
  36. function BodyColorString () {
  37.   return '<body' +
  38.     ((this.bgColor == null) ? '' : ' bgcolor="#' + this.bgColor + '"') +
  39.     ((this.fgColor == null) ? '' : ' text="#' + this.fgColor + '"') +
  40.     ((this.linkColor == null) ? '' : ' link="#' + this.linkColor + '"') +
  41.     ((this.vlinkColor == null) ? '' : ' vlink="#' + this.vlinkColor + '"') +
  42.     ((this.alinkColor == null) ? '' : ' alink="#' + this.alinkColor + '"') +
  43.     '>';
  44. }
  45. function Alternator (bodyA, bodyB, text) {
  46.   this.bodyA = bodyA;
  47.   this.bodyB = bodyB;
  48.   this.currentBody = "A";
  49.   this.text = text;
  50.   this.toString = AlternatorString;
  51.   return this;
  52. }
  53. function AlternatorString () {
  54.   var str = "<html>";
  55.   with (this) {
  56.     if (currentBody == "A") {
  57.       str += bodyA;
  58.       currentBody = "B";
  59.     }
  60.     else {
  61.       str += bodyB;
  62.       currentBody = "A";
  63.     }
  64.     str += text + '</body></html>';
  65.   }
  66.   return str;
  67. }        
  68. function Event (start, loops, delay, action) {
  69.   this.start = start * 1000;
  70.   this.next = this.start;
  71.   this.loops = loops;
  72.   this.loopsRemaining = loops;
  73.   this.delay = delay * 1000;
  74.   this.action = action;
  75.   return this;
  76. }
  77. function EventQueue (name, delay, loopAfter, loops, stopAfter) {
  78.   this.active = true;
  79.   this.name = name;
  80.   this.delay = delay * 1000;
  81.   this.loopAfter = loopAfter * 1000;
  82.   this.loops = loops;
  83.   this.loopsRemaining = loops;
  84.   this.stopAfter = stopAfter * 1000;
  85.   this.event = new Object;
  86.   this.start = new Date ();
  87.   this.loopStart = new Date();
  88.   this.eventID = 0;
  89.   this.addEvent = AddEvent;
  90.   this.processEvents = ProcessEvents;
  91.   this.startQueue = StartQueue;
  92.   this.stopQueue = StopQueue;
  93.   return this;
  94. }
  95. function AddEvent (event) {
  96.   this.event[this.eventID++] = event;
  97. }
  98. function StartQueue () {
  99.   with (this) {
  100.     active = true;
  101.     start = new Date();
  102.     loopStart = new Date();
  103.     loopsRemaining = loops;
  104.     setTimeout (name + ".processEvents()", this.delay);
  105.   }
  106. }
  107. function StopQueue () {
  108.   this.active = false;
  109. }
  110. function ProcessEvents () {
  111.   with (this) {
  112.     if (!active) return;
  113.     var now = new Date();
  114.     if (now.getTime() - start.getTime() >= stopAfter) {
  115.       active = false;
  116.       return;
  117.     }
  118.     var elapsed = now.getTime() - loopStart.getTime();
  119.     if (elapsed >= loopAfter) {
  120.       if (--loopsRemaining <= 0) {
  121.         active = false;
  122.         return;
  123.       }
  124.       loopStart = new Date();
  125.       elapsed = now.getTime() - loopStart.getTime();
  126.       for (var i in event)
  127.         if (event[i] != null) {
  128.           event[i].next = event[i].start;
  129.           event[i].loopsRemaining = event[i].loops;
  130.         }
  131.     }
  132.     for (var i in event)
  133.       if (event[i] != null)
  134.         if (event[i].next <= elapsed)
  135.           if (event[i].loopsRemaining-- > 0) {
  136.             event[i].next = elapsed + event[i].delay;
  137.             eval (event[i].action);
  138.           }
  139.     setTimeout (this.name + ".processEvents()", this.delay);
  140.   }
  141. }
  142. var black = new Color ("000000");
  143. var white = new Color ("FFFFFF");
  144. var blue = new Color ("0000FF");
  145. var magenta = new Color ("FF00FF");
  146. var yellow = new Color ("FFFF00");
  147.  
  148. var blackOnWhite = new BodyColor (white, black);
  149. var whiteOnBlack = new BodyColor (black, white);
  150. var blueOnWhite = new BodyColor (white, blue);
  151. var yellowOnBlue = new BodyColor (blue, yellow);
  152. var magentaOnYellow = new BodyColor (yellow, magenta);
  153.  
  154. var flashyText = new Alternator (blackOnWhite, whiteOnBlack,
  155.   '<h1 align="center">Flashy text</h1>');
  156. var dance1 = new Alternator (yellowOnBlue, magentaOnYellow,
  157.   '<h1 align="center">Dancing...</h1>');
  158. var dance2 = new Alternator (whiteOnBlack, yellowOnBlue,
  159.   '<h1 align="center">Dancing...</h1>');
  160. var dance3 = new Alternator (new BodyColor(black,yellow), magentaOnYellow,
  161.   '<h1 align="center">Dancing...</h1>');
  162. var inthe1 = new Alternator (magentaOnYellow, yellowOnBlue,
  163.   '<h1 align="center">...in the...</h1>');
  164. var inthe2 = new Alternator (blackOnWhite, whiteOnBlack,
  165.   '<h1 align="center">...in the...</h1>');
  166. var inthe3 = new Alternator (yellowOnBlue, blueOnWhite,
  167.   '<h1 align="center">...in the...</h1>');
  168. var streets1 = new Alternator (whiteOnBlack, yellowOnBlue,
  169.   '<h1 align="center">...streets!</h1>');
  170. var streets2 = new Alternator (blueOnWhite, magentaOnYellow,
  171.   '<h1 align="center">...streets!</h1>');
  172. var streets3 = new Alternator (yellowOnBlue, blackOnWhite,
  173.   '<h1 align="center">...streets!</h1>');
  174.  
  175. var flashEvent = new Event (0, 10, 0.1,
  176.   'self.head.location="javascript:parent.flashyText"');
  177. var d1e = new Event (0, 10, .1,
  178.   'self.f1.location="javascript:parent.dance1"');
  179. var d2e = new Event (5, 10, .1,
  180.   'self.f2.location="javascript:parent.dance2"');
  181. var d3e = new Event (10, 10, .1,
  182.   'self.f3.location="javascript:parent.dance3"');
  183. var i1e = new Event (3, 10, .1,
  184.   'self.f1.location="javascript:parent.inthe1"');
  185. var i2e = new Event (8, 10, .1,
  186.   'self.f2.location="javascript:parent.inthe2"');
  187. var i3e = new Event (13, 10, .1,
  188.   'self.f3.location="javascript:parent.inthe3"');
  189. var s1e = new Event (6, 10, .1,
  190.   'self.f1.location="javascript:parent.streets1"');
  191. var s2e = new Event (11, 10, .1,
  192.   'self.f2.location="javascript:parent.streets2"');
  193. var s3e = new Event (16, 10, .1,
  194.   'self.f3.location="javascript:parent.streets3"');
  195.  
  196. var evq = new EventQueue ("evq", 0.1, 20, 10, 60);
  197. evq.addEvent (flashEvent);
  198. evq.addEvent(d1e);
  199. evq.addEvent(i1e);
  200. evq.addEvent(s1e);
  201. evq.addEvent(d2e);
  202. evq.addEvent(i2e);
  203. evq.addEvent(s2e);
  204. evq.addEvent(d3e);
  205. evq.addEvent(i3e);
  206. evq.addEvent(s3e);
  207.  
  208.  
  209. function initialize () {
  210.   evq.startQueue();
  211. }
  212. // end script -->
  213. </script>
  214. <frameset rows="52,52,52,52,*" onLoad="initialize()">
  215.   <frame name="head" src="javascript:parent.emptyFrame"
  216.      marginwidth=1 marginheight=1 scrolling="no" noresize>
  217.   <frame name="f1" src="javascript:parent.emptyFrame"
  218.      marginwidth=1 marginheight=1 scrolling="no" noresize>
  219.   <frame name="f2" src="javascript:parent.emptyFrame"
  220.      marginwidth=1 marginheight=1 scrolling="no" noresize>
  221.   <frame name="f3" src="javascript:parent.emptyFrame"
  222.      marginwidth=1 marginheight=1 scrolling="no" noresize>
  223.   <frame name="body" src="javascript:parent.emptyFrame">
  224. </frameset>
  225. <noframes>
  226. <h2 align="center">Netscape 2.0 or other JavaScript-enabled browser required</h2>
  227. </noframes>
  228. </html>
  229.