aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base80
1 files changed, 80 insertions, 0 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base
new file mode 100644
index 0000000..5d46ab4
--- /dev/null
+++ b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/cssspriteanimation.html.svn-base
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<!--
+Copyright 2010 The Closure Library Authors. All Rights Reserved.
+
+Use of this source code is governed by the Apache License, Version 2.0.
+See the COPYING file for details.
+-->
+<head>
+<title>CssSpriteAnimation demo</title>
+<script type="text/javascript" src="../base.js"></script>
+<script type="text/javascript">
+ goog.require('goog.events');
+ goog.require('goog.fx.Animation');
+ goog.require('goog.fx.CssSpriteAnimation');
+ goog.require('goog.math.Box');
+ goog.require('goog.math.Size');
+</script>
+<style>
+
+.icon {
+ width: 11px;
+ height: 11px;
+ background-image: url(../images/offlineicons.png);
+}
+
+#test1,
+#test3 {
+ background-position: 0 -11px;
+}
+
+#test2 {
+ background-position: 0 -132px;
+}
+</style>
+</head>
+<body>
+
+<p>The following just runs and runs...</p>
+<div class=icon id=test1></div>
+
+<p>The animation is just an ordinary animation so you can pause it etc.
+<div class=icon id=test2></div>
+
+<p>
+<button onclick="sa2.play()">Play</button>
+<button onclick="sa2.pause()">Pause</button>
+</p>
+
+<p>The animation can be played once by stopping it after it finishes for the
+first time.
+
+<div class=icon id=test3></div>
+
+<script>
+
+var size = new goog.math.Size(11, 11);
+
+var el = document.getElementById('test1');
+var sa = new goog.fx.CssSpriteAnimation(el, size,
+ new goog.math.Box(11, 11, 99, 0), 1200);
+sa.play();
+
+var el2 = document.getElementById('test2');
+var sa2 = new goog.fx.CssSpriteAnimation(el2, size,
+ new goog.math.Box(132, 11, 132 + 11 * 8, 0), 1200);
+sa2.play();
+
+var el3 = document.getElementById('test3');
+var sa3 = new goog.fx.CssSpriteAnimation(el3, size,
+ new goog.math.Box(11, 11, 99, 0), 8000);
+goog.events.listen(sa3, goog.fx.Transition.EventType.FINISH, function() {
+ sa3.stop();
+});
+sa3.play();
+
+</script>
+
+</body>
+</html>