JavaScript DHTML/Ajax Layer/Fade

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

Animation Example - Fade

<!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;
}
#hd img {
   vertical-align:middle;
}
#hd h1 {
   display:inline;
   margin:0 0 0 20px;
   vertical-align:middle;
}
ul, li {
   margin:0;
   padding:0;
   list-style:none;
}
#doc {
   margin:10px;
}
#examples {
   margin:60px 40px;
}
#examples li {
   margin-bottom:1em;
}
#examples li a {
   color:#666;
   font:85% verdana;
}
#demo {
   background:#ccc;
   font:100%/1.2em arial;
   width:10px;
   height:10px;
}
#animation-demo-scroll #demo p {
   width:600px;
}
#animation-demo-motion #demo {
   color:yellow;
   font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
   background:#ccc;
   font:100%/1.2em arial;
   width:200px;
   height:200px;
}
#animation-demo-colors #demo {
   border:3px solid #c3c;
}
#animation-demo-scroll #demo {
   width:400px;
   height:200px;
   overflow:auto;
}
#animation-demo-colors #demo {
}
#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">
<div id="doc">
   <h1>Animation Example - Fade</h1>
   <p>This example demonstrates how to animate an element"s opacity to a given value.</p>
   <p>Click anywhere to start animation.</p>
   <div id="demo">Lorem ipsum dolor </div>  
</div>
</body>
</html>


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


Animation: fade in and fade out

//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">
<!--
body{
background:#000000;
}
//-->
</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>

<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>
<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>
<p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p><p>#</p>

</body>
</html>



Fade Color Demo

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>


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

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ajax_Layer/Fade&oldid=1661»