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 .
I have tested your first code (which I found very usefull) and I tried to put some obstacles, for example, in position 400px top, 200px left, in it, what it has supposed to do is that when the moving div enconuters an obstacle it cant pass through, didnt work -.-, what code I have to use to do it?, i am so so loss....
ReplyDeleteare you changing the css property ?
ReplyDeleteif you wanna just animate the dive you can use the jquery animate function . $('#ufo').animate({left: '+=5'},800) this function will move the div 5 pixel on any event you will call and will take 800 ms to complete the action use this
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete