Click the buttons below to handle animation

Java script Animation

Click the buttons below to handle animation

<html>
   
   <head>
      <title>JavaScript Animation</title>
      
      <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>
      
   </head>
   
   
      <form>
         <img id="myImage" src="Suicide-Squad.jpg" />
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick="moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>
      
   </body>
</html>

Comments

Post a Comment

Popular posts from this blog

java script book in PDF format

What is JavaScript? JavaScript is a scripting language that enables web developers/designers to build more functional and interactive websites.  Common uses of JavaScript include: Alert messages  Popup windows  Popup windows  Dynamic drop down menus  Form validation  Displaying date/time  JavaScript usually runs on the client-side(the browser's side), as opposed to server-side(on the web server). One benefit of doing this is performance. On the client side, JavaScript is loaded into the browser and can run as soon as it is called. *---java script book in PDF format--*
Read more

use window dot location in java script

Click the following button, you will be redirected to home page. <html>    <head>             <script type="text/javascript">          <!--             function Redirect() {                window.location="http://www.google.com";             }          //-->       </script>          </head>      <body>       <p>Click the following button, you will be redirected to home page.</p>             <form>          <input type="button" value="Redirect Me" onclick="Redirect();" />       </form>          </body> </html>
Read more

auto redirected page in java script

auto redirected <html>    <head>         <script type="text/javascript">          <!--             function Redirect() {                window.location="http://www.google.com";             }                         document.write("You will be redirected to main page in 10 sec.");             setTimeout('Redirect()', 10000);          //-->       </script>          </head>      <body>    </body> </html>
Read more