summaryrefslogtreecommitdiff
path: root/includes/js/dojox/fx/tests/example_backgroundPosition.html
diff options
context:
space:
mode:
Diffstat (limited to 'includes/js/dojox/fx/tests/example_backgroundPosition.html')
-rw-r--r--includes/js/dojox/fx/tests/example_backgroundPosition.html59
1 files changed, 59 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_backgroundPosition.html b/includes/js/dojox/fx/tests/example_backgroundPosition.html
new file mode 100644
index 0000000..5011213
--- /dev/null
+++ b/includes/js/dojox/fx/tests/example_backgroundPosition.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <title>Animated background position example | The Dojo Toolkit</title>
+
+ <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
+ <style type="text/css">
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/themes/dijit.css";
+ @import "../../../dijit/themes/tundra/tundra.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+
+ #theNode {
+ background:#dedede url('images/longBg.png') 0px 0px;
+ padding:3px 10px 3px 10px;
+ border:1px solid #b7b7b7;
+ color:#666;
+ cursor:pointer;
+ }
+
+ </style>
+ <script type="text/javascript">
+ dojo.require("dojo.fx");
+ var anim = null;
+ var init = function(){
+ var node = dojo.byId('theNode');
+ anim = new dojo._Animation({
+ curve: new dojo._Line(0,-500),
+ duration: 3000,
+ onEnd: (function(){ anim.play(); }), // loop indefinately
+ onAnimate: function(){
+ var str = Math.floor(parseInt(arguments[0]))+"px 0px";
+ dojo.style(node,"backgroundPosition",str);
+ }
+ });
+
+ // dojo.query "magic"
+ dojo.query("#theNode")
+ .connect("onmouseenter",anim,"play")
+ .connect("onmouseout",anim,"pause")
+ .connect("onclick",function(){
+ alert('clicked the button');
+ });
+ };
+ dojo.addOnLoad(init);
+
+ </script>
+</head>
+<body class="tundra">
+
+ <h1 class="testTitle">dojo._Animation test:</h1>
+
+ <p>
+ <div class="dijitInline" id="theNode">Test</div>
+ </p>
+
+</body>
+</html>