JavaScript DHTML/Ajax Layer/Animation Size

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

Animation Example - Size

<!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">
<div id="doc">
   <h1>Animation Example - Size</h1>
   <p>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.</p>
   <p>Click anywhere to start animation.</p>
   <div id="demo"></div>  
</div>
</body>
</html>


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


Animation Example - Size Plus Other Attributes

<!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">
<div id="doc">
   <h1>Animation Example - Size Plus Other Attributes</h1>
   <p>This example demonstrates how to animate an element"s size, fontSize, and opacity to given values.</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>


How to animate an element"s position and size together

<!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">
<div id="doc">
   <h1>Motion Example - With Additional Attributes</h1>
   <p>This example demonstrates how to animate an element"s position and size together.</p>
   <p>Click anywhere to start animation.</p>
   <div id="demo"></div>  
   <div id="target"></div>
</div>
</body>
</html>


<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

<!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">
<div id="doc">
   <h1>Animation Example - Basic</h1>
   <p>This example demonstrates how to animate an element"s width to a given value.</p>
   <p>Click anywhere to start animation.</p>
   <div id="demo"></div>
</div>
</body>
</html>


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

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