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:-
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:-
No comments:
Post a Comment