This tutorial is for how to move a DIV using java script . Here is the example for moving a div by the help of javascript .
You have to make the div position Absolute for older browser . I made the ufo div position absolute for getting the div move using javascript .
If you wanna get animation using CSS3 in this . Here is the code for CSS3 make some animation .
Any doubt any query related to this comment bellow .
You have to make the div position Absolute for older browser . I made the ufo div position absolute for getting the div move using javascript .
<html>
<head>
<style>
#ufo
{
position:absolute;}
</style>
<script>
function initial()
{
document.getElementById('ufo').style.left=200+'px';
document.getElementById('ufo').style.top=200+'px';
}
function right(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)-5+'px';
}
function left(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)+5+'px';
}
function top(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)+5+'px';
}
function down(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)-5+'px';
}
</script>
<link rel="stylesheet" href="main.css">
</head>
<body onload="initial()">
<div id = "ufo">
i am a moving dig. bring mouse over me fellas !!!! </div>
<button id="button" onClick="right();">Press here to move left</button>
<button id="button" onClick="left();">press here to move light</button>
<button id="button" onClick="top();">press here to move down</button>
<button id="button" onClick="down();">press here to move up</button>
</body>
</html>
If you wanna get animation using CSS3 in this . Here is the code for CSS3 make some animation .
#ufo
{
position:absolute;
display:block;
margin:auto;
text-align:center;
width:100px;
height:100px;
border:1px solid blue;
-webkit-transform:rotate(20deg);
background:-webkit-linear-gradient(top,yellow,green);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
text-shadow:rgba(110,110,110,.7) -1px 2px 3px;
}
#ufo:hover
{
width:200px;
height:200px;
-webkit-transform:rotate(70deg);
}
#button
{
height:30px;
weight:100px;
-webkit-transform:rotate(350deg);
margin:auto;
background:-webkit-linear-gradient(top,red,yellow);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
}
Any doubt any query related to this comment bellow .
