<html> <head> <title>Javascript Moving Animations</title> </head> <body> <style type="text/css"> .my_btn_1{ background:#0099da; border-radius:2px; padding:6px 20px; margin:15px 10px; color:#FFF;} .my_btn_1:hover{ background:#069;} </style> <script type="text/javascript"> <!-- var imgObj = null; var animate ; function init(){ imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight(){ imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop(){ clearTimeout(animate); imgObj.style.left = '0px'; } window.onload =init; //--> </script> <form> <img id="myImage" src="../images/Free-Time-Learning-circle.png" width="100" height="90" /><br /> <input type="button" value="Start" class="my_btn_1" onclick="moveRight();" /> <input type="button" value="Stop" class="my_btn_1" onclick="stop();" /> </form> </body> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>
Output :
Topic :
Moving Animations
