JavaScript DHTML/Ajax Layer/Fade
Содержание
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;
}
- 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">
Animation Example - Fade
This example demonstrates how to animate an element"s opacity to a given value.
Click anywhere to start animation.
</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>