JavaScript DHTML/Ajax Layer/Animation Color

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

Animation Example - Colors

   <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 - Colors</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: 600, to: 300} });
  YAHOO.util.Event.on(document, "click", anim.animate, anim, true);

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

Animation Example - Colors

This example demonstrates how to animate an element"s font and background color.

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_Color&oldid=1691»