в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:15:53Z

1 версия

Новая страница

==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">
<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>

</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>

<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>

</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>

← Предыдущая	Версия 09:58, 26 мая 2010
(нет различий)

JavaScript DHTML/Ajax Layer/Fade - История изменений

в 09:58, 26 мая 2010

Admin: 1 версия