home *** CD-ROM | disk | FTP | other *** search
/ ftp.anonawest.com / ftp.anonawest.com.tar / ftp.anonawest.com / JSFX_Halloween.js < prev    next >
Text File  |  2013-03-02  |  7KB  |  255 lines
  1. /*******************************************************************
  2. *
  3. * File    : JSFX_Halloween.js ⌐ JavaScript-FX.com
  4. *
  5. * Created : 2001/10/16
  6. *
  7. * Author  : Roy Whittle www.Roy.Whittle.com
  8. *           
  9. * Purpose : To create animated Ghosts on the page using any user 
  10. *        supplied image.
  11. *
  12. * History
  13. * Date         Version        Description
  14. *
  15. * 2001-10-16    1.0        Created for javascript-fx
  16. ***********************************************************************/
  17. /*** START OF CODE FROM JSFX_Layer.js ***/
  18. if(!window.JSFX)
  19.     JSFX=new Object();
  20. JSFX.layerNo=0; 
  21. /**********************************************************************************/
  22. JSFX.createElem = function(htmlStr)
  23. {
  24.     var elem = null;
  25.  
  26.      if(document.layers) 
  27.     {
  28.         elem=new Layer(2000); 
  29.         elem.document.open(); 
  30.         elem.document.write(htmlStr); 
  31.         elem.document.close(); 
  32.         elem.innerHTML = htmlStr;
  33.     }
  34.     else 
  35.     if(document.all) 
  36.     {
  37.         var xName = "xLayer" + JSFX.layerNo++; 
  38.         var txt = "<DIV ID='" + xName 
  39.             + "' STYLE=\"position:absolute;" 
  40.             + "visibility:hidden\">" 
  41.             + htmlStr 
  42.             + "</DIV>"; 
  43.  
  44.             document.body.insertAdjacentHTML("BeforeEnd",txt); 
  45.  
  46.         elem = document.all[xName]; 
  47.     } 
  48.     else 
  49.     if (document.getElementById)
  50.     {
  51.         var xName="xLayer" + JSFX.layerNo++;
  52.         var txt = ""
  53.             + "position:absolute;"
  54.             + "visibility:hidden";
  55.  
  56.         var newRange = document.createRange();
  57.  
  58.         elem = document.createElement("DIV");
  59.         elem.setAttribute("style",txt);
  60.         elem.setAttribute("id", xName);
  61.  
  62.         document.body.appendChild(elem);
  63.  
  64.         newRange.setStartBefore(elem);
  65.         strFrag = newRange.createContextualFragment(htmlStr);    
  66.         elem.appendChild(strFrag);
  67.     }
  68.  
  69.     return elem;
  70. }
  71. /**********************************************************************************/
  72. JSFX.Layer = function(newLayer) 
  73. {
  74.     if(!newLayer)
  75.         return;
  76.  
  77.     if(typeof newLayer == "string")
  78.         this.elem = JSFX.createElem(newLayer);
  79.     else
  80.         this.elem=newLayer;
  81.  
  82.     if(document.layers)
  83.     {
  84.         this.images=this.elem.document.images; 
  85.         this.style = this.elem;
  86.      } 
  87.     else 
  88.     {
  89.         this.images  = document.images; 
  90.         this.style   = this.elem.style; 
  91.     } 
  92. } 
  93. /**********************************************************************************/
  94. var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);
  95.  
  96. /**********************************************************************************/
  97. /*** moveTo (x,y) ***/
  98. JSFX.Layer.prototype.moveTo = function(x,y)
  99. {
  100.     this.style.left = x+"px";
  101.     this.style.top = y+"px";
  102. }
  103. if(ns4)
  104.     JSFX.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }
  105. /**********************************************************************************/
  106. /*** show()/hide() Visibility ***/
  107. JSFX.Layer.prototype.show        = function()     { this.style.visibility = "visible"; } 
  108. JSFX.Layer.prototype.hide        = function()     { this.style.visibility = "hidden"; } 
  109. if(ns4)
  110. {
  111.     JSFX.Layer.prototype.show        = function()     { this.style.visibility = "show"; }
  112.     JSFX.Layer.prototype.hide         = function()     { this.style.visibility = "hide"; }
  113. }
  114. /**********************************************************************************/
  115. /*** Opacity ***/
  116. if(document.all)
  117. {
  118.     JSFX.Layer.prototype.setOpacity = function(pc)
  119.     {
  120.         if(this.style.filter=="")
  121.             this.style.filter="alpha(opacity=100);";
  122.         this.elem.filters.alpha.opacity=pc;
  123.     }
  124. }
  125. else
  126.     JSFX.Layer.prototype.setOpacity = function(pc) {return 0;}
  127. /******* END OF CODE FROM JSFX.Layer.js ***/
  128. /*** START OF CODE FROM JSFX.Browser.js ***/
  129. JSFX.Browser = new Object();
  130.  
  131. if(navigator.appName.indexOf("Netscape") != -1)
  132. {
  133.     JSFX.Browser.getCanvasWidth    = function() {return innerWidth;}
  134.     JSFX.Browser.getCanvasHeight    = function() {return innerHeight;}
  135.     JSFX.Browser.getMinX        = function() {return(pageXOffset);}
  136.     JSFX.Browser.getMinY        = function() {return(pageYOffset);}
  137.     JSFX.Browser.getMaxX        = function() {return(pageXOffset+innerWidth);}
  138.     JSFX.Browser.getMaxY        = function() {return(pageYOffset+innerHeight);}
  139. }
  140. else     if(document.all)
  141. {
  142.     JSFX.Browser.getCanvasWidth    = function() {return document.body.clientWidth;}
  143.     JSFX.Browser.getCanvasHeight    = function() {return document.body.clientHeight;}
  144.     JSFX.Browser.getMinX        = function() {return(document.body.scrollLeft);}
  145.     JSFX.Browser.getMinY        = function() {return(document.body.scrollTop);}
  146.     JSFX.Browser.getMaxX        = function() {
  147.         return(document.body.scrollLeft
  148.             +document.body.clientWidth);
  149.     }
  150.     JSFX.Browser.getMaxY        = function() {
  151.             return(document.body.scrollTop
  152.                 +document.body.clientHeight);
  153.     }
  154. } 
  155. /*** END OF CODE FROM JSFX.Browser.js ***/
  156. /*** START OF CODE FROM JSFX.Ghosts.js ***/
  157.  
  158. JSFX.Halloween = new Object();
  159. JSFX.Halloween.Ghosts = new Array();
  160. JSFX.Halloween.start = function()
  161. {
  162.     if(JSFX.Halloween.theTimer == null)
  163.     {
  164.         JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);
  165.     }
  166. }
  167. JSFX.Halloween.animateAll = function()
  168. {
  169.     JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);
  170.     var sp = JSFX.Halloween.Ghosts;
  171.     var i;
  172.     for(i=0 ; i<sp.length ; i++)
  173.     {
  174.         sp[i].animate();
  175.     }
  176.  
  177. }
  178. JSFX.AddGhost = function(img)
  179. {
  180.     var myGhost = null;
  181.     var htmlStr = "<IMG SRC='"+img+"'>";
  182.  
  183.     myGhost = new JSFX.Layer(htmlStr);
  184.     myGhost.op = 0;
  185.     myGhost.x = Math.random()*JSFX.Browser.getMaxX();
  186.     myGhost.y = Math.random()*JSFX.Browser.getMaxY();
  187.     myGhost.dx = 0;
  188.     myGhost.dy = 0;
  189.     myGhost.w = 30;
  190.     myGhost.h = 30;
  191.     myGhost.targetX = Math.random()*JSFX.Browser.getMaxX();
  192.     myGhost.targetY = Math.random()*JSFX.Browser.getMaxY();
  193.     myGhost.state = "off"
  194.     myGhost.animate = JSFX.animateGhosts;
  195.     myGhost.hide();
  196.     myGhost.setOpacity(this.op);
  197.     myGhost.moveTo(myGhost.x,myGhost.y);
  198.     JSFX.Halloween.Ghosts[JSFX.Halloween.Ghosts.length] = myGhost;
  199.     JSFX.Halloween.start();
  200. }
  201. JSFX.animateGhosts = function()
  202. {
  203.     if(this.state == "off")
  204.     {
  205.         if(Math.random() > .99)
  206.         {
  207.             this.state="up";
  208.             this.show();
  209.         }
  210.     }
  211.     else if(this.state == "on")
  212.     {
  213.         if(Math.random() > .98)
  214.             this.state="down";
  215.     }
  216.     else if(this.state == "up")
  217.     {
  218.         this.op += 2;
  219.         this.setOpacity(this.op);
  220.         if(this.op==100)
  221.             this.state = "on";
  222.     }
  223.     else if(this.state == "down")
  224.     {
  225.         this.op -= 2;
  226.         if(this.op==0)
  227.         {
  228.             this.hide();
  229.             this.state = "off";
  230.         }
  231.         else
  232.             this.setOpacity(this.op);
  233.     }
  234.  
  235.     m = this;
  236.     var X = (this.targetX - m.x);
  237.     var Y = (this.targetY - m.y);
  238.     var len = Math.sqrt(X*X+Y*Y);
  239.     if(len < 1) len = 1;
  240.     var dx = 20 * (X/len);
  241.     var dy = 20 * (Y/len);
  242.     var ddx = (dx - this.dx)/10;
  243.     var ddy = (dy - this.dy)/10;
  244.     this.dx += ddx;
  245.     this.dy += ddy;
  246.     m.x += this.dx;
  247.     m.y += this.dy;
  248.     m.moveTo(m.x, m.y);
  249.     if(Math.random() >.95 )
  250.     {
  251.         this.targetX = Math.random()*(JSFX.Browser.getCanvasWidth()-150);
  252.         this.targetY = Math.random()*(JSFX.Browser.getCanvasHeight()+JSFX.Browser.getMinY()-150);
  253.     }
  254. }
  255.