diff options
Diffstat (limited to 'misc/openlayers/tests/manual/tween.html')
-rw-r--r-- | misc/openlayers/tests/manual/tween.html | 82 |
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 |