git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/example_backgroundPosition.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Animated background position example | The Dojo Toolkit</title>
   6
   7         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
   8         <style type="text/css">
   9                 @import "../../../dojo/resources/dojo.css";
  10                 @import "../../../dijit/themes/dijit.css";
  11                 @import "../../../dijit/themes/tundra/tundra.css";
  12                 @import "../../../dijit/tests/css/dijitTests.css";
  13
  14                 #theNode {
  15                         background:#dedede url('images/longBg.png') 0px 0px;
  16                         padding:3px 10px 3px 10px;
  17                         border:1px solid #b7b7b7;
  18                         color:#666;
  19                         cursor:pointer;
  20                 }
  21
  22         </style>
  23         <script type="text/javascript">
  24                 dojo.require("dojo.fx");
  25                 var anim = null;
  26                 var init = function(){
  27                         var node = dojo.byId('theNode');
  28                         anim = new dojo._Animation({
  29                                 curve: new dojo._Line(0,-500),
  30                                 duration: 3000,
  31                                 onEnd: (function(){ anim.play(); }), // loop indefinately
  32                                 onAnimate: function(){
  33                                         var str = Math.floor(parseInt(arguments[0]))+"px 0px";
  34                                         dojo.style(node,"backgroundPosition",str);
  35                                 }
  36                         });
  37
  38                         // dojo.query "magic"
  39                         dojo.query("#theNode")
  40                                 .connect("onmouseenter",anim,"play")
  41                                 .connect("onmouseout",anim,"pause")
  42                                 .connect("onclick",function(){
  43                                         alert('clicked the button');
  44                                 });
  45                 };
  46                 dojo.addOnLoad(init);
  47
  48         </script>
  49 </head>
  50 <body class="tundra">
  51
  52         <h1 class="testTitle">dojo._Animation test:</h1>
  53
  54         <p>
  55         <div class="dijitInline" id="theNode">Test</div>
  56         </p>
  57
  58 </body>
  59 </html>