diff options
| author | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
|---|---|---|
| committer | Chris Schlaeger <chris@linux.com> | 2014-08-12 21:56:44 +0200 |
| commit | ea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch) | |
| tree | af67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/tests/manual/tween.html | |
| parent | 59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff) | |
| download | postrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip | |
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/tests/manual/tween.html')
| -rw-r--r-- | misc/openlayers/tests/manual/tween.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/misc/openlayers/tests/manual/tween.html b/misc/openlayers/tests/manual/tween.html new file mode 100644 index 0000000..88606cb --- /dev/null +++ b/misc/openlayers/tests/manual/tween.html @@ -0,0 +1,82 @@ +<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 |