JavaScript DHTML/Ajax Layer/Animation Size
Содержание
Animation Example - Size
<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 - Size</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 attributes = { width: { to: 300 }, height: { to: 300 } }; var anim = new YAHOO.util.Anim("demo", attributes, 0.5, YAHOO.util.Easing.backOut); YAHOO.util.Event.on(document, "click", anim.animate, anim, true);
}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-size">
Animation Example - Size
This example demonstrates how to animate an element"s size to a given value. The backOut Easing method is used to give it some flair.
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 Example - Size Plus Other Attributes
<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 - Size Plus Other Attributes</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 attributes = { width: {to: 100}, height: {to: 100}, fontSize: {from: 100, to: 50, unit: "%"}, opacity: { to: 0.5 } }; var anim = new YAHOO.util.Anim("demo", attributes, 0.5, YAHOO.util.Easing.backOut); YAHOO.util.Event.on(document, "click", anim.animate, anim, true);
}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-size-plus">
Animation Example - Size Plus Other Attributes
This example demonstrates how to animate an element"s size, fontSize, and opacity to given values.
Click anywhere to start animation.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
How to animate an element"s position and size together
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Motion Example - With Additional Attributes</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 attributes = { points: { to: YAHOO.util.Dom.getXY("target"), control: [ [400, 800], [-100, 200] ] }, width: {by: 100}, height: {by: 100} }; var anim = new YAHOO.util.Motion("demo", attributes, 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-motion">
Motion Example - With Additional Attributes
This example demonstrates how to animate an element"s position and size together.
Click anywhere to start animation.
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
How to animate an element"s width to a given value
<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 - Basic</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", { width: {to: 500} }); YAHOO.util.Event.on(document, "click", anim.animate, anim, true);
}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-basic">
Animation Example - Basic
This example demonstrates how to animate an element"s width 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>