JavaScript DHTML/Ajax Layer/Animation Attributes

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

Animation Example - Adding Attributes to an Existing Animation

   <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 - Adding Attributes to an Existing Animation</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;

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li { 

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. 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}
  };
   
  var anim = new YAHOO.util.Anim("demo", attributes);
  anim.attributes.fontSize = { from: 100, to: 60, unit: "%" };
  anim.attributes.opacity = { to: 0.5 };
  anim.method = YAHOO.util.Easing.elasticOut;
  
  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 - Adding Attributes to an Existing Animation

This example demonstrates how to animate an element"s size to a given value. Other attributes are added after the instance is created in this example.

Click anywhere to start animation.

Lorem ipsum dolor

</body> </html> 

      </source>

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


Animation Example - Unit

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

}

  1. hd img {
  vertical-align:middle;

}

  1. hd h1 {
  display:inline;
  margin:0 0 0 20px;
  vertical-align:middle;

} ul, li { 

  margin:0;
  padding:0;
  list-style:none;

}

  1. doc {
  margin:10px;

}

  1. examples {
  margin:60px 40px;

}

  1. examples li {
  margin-bottom:1em;

}

  1. examples li a {
  color:#666;
  font:85% verdana;

}

  1. demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:10px;
  height:10px;

}

  1. animation-demo-scroll #demo p {
  width:600px;

}

  1. animation-demo-motion #demo {
  color:yellow;
  font-size:0;

}

  1. animation-demo-size-plus #demo, #animation-demo-fade #demo, #animation-demo-colors #demo {
  background:#ccc;
  font:100%/1.2em arial;
  width:200px;
  height:200px;

}

  1. animation-demo-colors #demo {
  border:3px solid #c3c;

}

  1. animation-demo-scroll #demo {
  width:400px;
  height:200px;
  overflow:auto;

}

  1. animation-demo-colors #demo {

}

  1. 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: { from: 30, to: 10, unit: "em"} } );
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

}; YAHOO.util.Event.onAvailable("demo", YAHOO.example.init); </script> </head> <body id="animation-demo-units">

Animation Example - Unit

This example demonstrates how to animate an element"s width using "em" as the unit.

Click anywhere to start animation.

</body> </html> 

      </source>

<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_Attributes&oldid=4167»