summaryrefslogtreecommitdiff
path: root/misc/openlayers/tests/manual/tween.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/tests/manual/tween.html')
-rw-r--r--misc/openlayers/tests/manual/tween.html82
1 files changed, 0 insertions, 82 deletions
diff --git a/misc/openlayers/tests/manual/tween.html b/misc/openlayers/tests/manual/tween.html
deleted file mode 100644
index 88606cb..0000000
--- a/misc/openlayers/tests/manual/tween.html
+++ /dev/null
@@ -1,82 +0,0 @@
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Tween Example</title>
- <style type="text/css">
- #viewport {
- width: 500px;
- height: 300px;
- border: 1px solid black;
- }
- #block {
- width: 10px;
- height: 10px;
- background-color: red;
- position: absolute;
- }
- </style>
- <script src="../../lib/OpenLayers.js"></script>
- <script type="text/javascript">
- var tween, events;
-
- function init(){
- tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);
-
- events = new OpenLayers.Events(null, OpenLayers.Util.getElement('viewport'), null, true);
- events.register("mousedown", null, moveBlock);
-
- changeTween();
- }
- function moveBlock(e) {
- var block = OpenLayers.Util.getElement('block');
- var viewport = OpenLayers.Util.getElement('viewport');
- var blockPosition = OpenLayers.Util.pagePosition(block);
- var viewportPosition = OpenLayers.Util.pagePosition(viewport);
- e.xy = events.getMousePosition(e);
- var from = {
- x: blockPosition[0] - viewportPosition[0],
- y: blockPosition[1] - viewportPosition[1]
- };
- var to = {
- x: e.xy.x,
- y: e.xy.y
- }
- var duration = OpenLayers.Util.getElement('duration').value;
- var callbacks = {
- eachStep: function(value) {
- block.style.left = (value.x + viewportPosition[0]) + 'px';
- block.style.top = (value.y + viewportPosition[1]) + 'px';
- }
- }
- tween.start(from, to, duration, {callbacks: callbacks});
-
- }
- function changeTween() {
- var transition = OpenLayers.Util.getElement('transition').value;
- var easing = OpenLayers.Util.getElement('easing').value;
- tween.stop();
- tween.easing = OpenLayers.Easing[transition][easing];
- }
- </script>
- </head>
- <body onload="init()">
- <div id="title">Tween Example</div>
- <div id="tags"></div>
- <div id="shortdesc">Show transition effects</div>
- <select name="transition" id="transition" onchange="changeTween()">
- <option value="Linear">Linear</option>
- <option value="Expo">Expo</option>
- <option value="Quad">Quad</option>
- </select>
- <select name="easing" id="easing" onchange="changeTween()">
- <option value="easeIn">EaseIn</option>
- <option value="easeOut">EaseOut</option>
- </select>
- <input type="text" name="duration" id="duration" value="100"></input>
- <div id="viewport">
- <div id="block"></div>
- </div>
- <div id="docs">
- This is an example of transition effects.
- </div>
- </body>
-</html> \ No newline at end of file