JavaScript DHTML/Ajax Layer/Fade

Материал из Web эксперт
Перейти к: навигация, поиск

Animation Example - Fade

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Animation Example - Fade</title> <style type="text/css"> /* Copyright (c) 2006, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt Version: 0.10.0

  • /

body {

  margin:0;
  font:small arial;

} h1 {

  color:#666;
  margin:0;
  font:bold 150% palatino, georgia;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li {

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. target {
  background:red;
  font-size:0;
  position:absolute;
  left:300px;top:300px;
  width:10px;
  height:10px;

} </style> <script type="text/javascript" src="./build/yahoo/yahoo.js"></script> <script type="text/javascript" src="./build/event/event.js"></script> <script type="text/javascript" src="./build/dom/dom.js"></script> <script type="text/javascript" src="./build/animation/animation.js"></script> <script type="text/javascript"> YAHOO.example.init = function() {

  var anim = new YAHOO.util.Anim("demo", { opacity: { to: 0 } }, 1, YAHOO.util.Easing.easeOut);
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-fade">

Animation Example - Fade

This example demonstrates how to animate an element"s opacity to a given value.

Click anywhere to start animation.

Lorem ipsum dolor

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>


Animation: fade in and fade out

   <source lang="html4strict">

//Smoke Ring - http://www.btinternet.ru/~kurt.grigg/javascript /* Paste this link as the last thing on your page, just before </body></html> <script type="text/javascript" src="smokering.js"></script>

Make sure the smokering.js file and the ring image, or your chosen image, are in/uploaded to the same directory/folder as the web page using the script!

  • /

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Smoke Ring</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css">

</style> </head> <body>

<script type="text/javascript"> //Smoke Ring - http://www.btinternet.ru/~kurt.grigg/javascript (function(){ var doesFilters = ((document.firstChild) && document.firstChild.filters); var modernBrowser = ((document.getElementById) && window.addEventListener || window.attachEvent); if (doesFilters && modernBrowser){

//Configure here! var theImage = new Image(); theImage.src = "http://www.wbex.ru/style/logo.png"; //Put any image here. /*Image height-width. A non-square image can be used but script runs smoother if it is square*/ var imgH = 150; //height. var imgW = 150; //width. var runSpeed = 30; //setTimeout speed. //End. var eqDims = (imgH==imgW); var r,h,w,y,x,fadeStep,fadeFrom,expH,expW,curH,curW,temp; var d = document; var pix = "px"; var domWw = (typeof window.innerWidth == "number"); var domSy = (typeof window.pageYOffset == "number"); var idx = d.getElementsByTagName("img").length; document.write("<img id="ring"+idx+"" src=""+theImage.src+"" alt="" style="" +"position:absolute;top:-200px;left:-200px;height:"+imgH+"px;width:"+imgW+"px" />"); if (domWw) r = window; else{

 if (d.documentElement && 
 typeof d.documentElement.clientWidth == "number" && 
 d.documentElement.clientWidth != 0)
 r = d.documentElement;
else{ 
 if (d.body && 
 typeof d.body.clientWidth == "number")
 r = d.body;
}

}

function winsize(){ if (domWw){

 h = r.innerHeight; 
 w = r.innerWidth;
}
else{
 h = r.clientHeight; 
 w = r.clientWidth;
} 

}

function scrl(yx){ var y,x; if (domSy){

y = r.pageYOffset;
x = r.pageXOffset;
}

else{

y = r.scrollTop;
x = r.scrollLeft;
}

return (yx == 0)?y:x; }

function rst(){ y = Math.floor((imgH/2) + Math.random() * (h-imgH)) + scrl(0); x = Math.floor((imgW/2) + Math.random() * (w-imgW)) + scrl(1); fadeStep = 3; fadeFrom = 100; expH = (eqDims)?1:(1 * imgH) / 100; expW = (eqDims)?1:(1 * imgW) / 100; curH = 0; curW = 0; }

function SmokeRing(){ curH += expH; curW += expW; if (curH > imgH/4){

fadeFrom -= fadeStep;

} if (curH*2 >= imgH){

rst();

}

temp.top = y-curH+pix;
temp.left = x-curW+pix;
temp.height = (curH*2)+pix;
temp.width = (curW*2)+pix;
temp.filter = "alpha(opacity="+fadeFrom+")";
setTimeout(SmokeRing,runSpeed); 

}

function init(){ temp = document.getElementById("ring"+idx).style; winsize(); rst(); var strt = Math.floor(500+Math.random()*2000); setTimeout(SmokeRing,strt); }

if (window.addEventListener){

window.addEventListener("load",init,false);
window.addEventListener("resize",winsize,false);
}  

else if (window.attachEvent){

window.attachEvent("onload",init);
window.attachEvent("onresize",winsize);
}

}//End })(); </script>

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

#

</body> </html>

      </source>
   
  


Fade Color Demo

   <source lang="html4strict">

http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples- Fade Color</title> <script language="JavaScript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">

 dynapi.library.setPath("./dynapisrc/");
 dynapi.library.include("dynapi.api");
 dynapi.library.include("Color");

</script> <script language="Javascript">

 var inc=0;
 var lastColor="#FFCC00";
 var newColor="#000000";
 var lyr = new DynLayer(null,100,100,200,200,lastColor);
 dynapi.document.addChild(lyr)
 dynapi.document.addChild(new DynLayer(null,10,50,20,20),"lyrFrom")
 dynapi.document.addChild(new DynLayer(null,35,50,20,20),"lyrTo")
 function fadeLyr(){
   inc+=5;
   var c=dynapi.functions.fadeColor(lastColor,newColor,inc)
   if(inc<100) window.setTimeout("fadeLyr()",50);
   else inc=0;
   lyr.setBgColor(c);
 };
 function start(){
   lastColor=lyr.getBgColor();
   newColor=dynapi.functions.getRandomColor();
   dynapi.document.lyrFrom.setBgColor(lastColor);
   dynapi.document.lyrTo.setBgColor(newColor);
   fadeLyr();
 }

</script> </head> <body> <a href="javascript:start()">Fade Layer Color</a> </body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>