4/23/2016

Create A HTML Page Insert A Image And Button In Page When A Click To A Button Image Should Shifted To Right Until Stop Button Not Press

Create A HTML Page Insert A Image And Button In Page When A Click To A Button Image Should Shifted To Right Until Stop Button Not Press 

NOTE:- When Double Click On Start Button It Speed Should Be Double As So On 

Code Start Here

Click.html

<html>
   
   <head>
      <title>JavaScript Animation</title>
      
      <script type="text/javascript">
         <!--
            var img = null;
            var animate ;
            
            function init(){
               img = document.getElementById('myImage');
               img.style.position= 'relative'; 
               img.style.left = '0px'; 
            }
            
            function moveRight(){
               img.style.left = parseInt(img.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20); // call moveRight in 20msec
            }
            
            function stop(){
               clearTimeout(animate);
               img.style.left = '0px'; 
            }
            
            window.onload =init;
         //-->
      </script>
      
   </head>
   
   <body>
   
      <form>
         <img id="myImage" src="Desert.jpg" height="400" width="600" />
         <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>

Output:-

www.programmingwithbasics.com


www.programmingwithbasics.com

Ghanendra Yadav

Ghanendra Yadav

Hello, I Am Ghanendra Yadav Owner of This Blog, I am professional Blogger and Programmer. I Love Programming, Logo Making, And Banner Designing. My Highest Qualification is MCA From NIT Warangal. You Can Find Me On Social Media Through Below Link And If You Have Any Query Related To Programming And Other Subject Comment Below or You Can Mail Me I Will Try To Answer Within 24 Hours Email:- yghanendra@student.nitw.ac.in

Find me on Social Media

Facebook | Twitter | Google+ | RSS Feed

No comments:

Post a Comment