<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script></head>
<style>
.navigate{
position:relative;
width:200px;
height:30px;
background:#666;
}
.position{
position:relative;
left:50%;
margin-left:-100px;
width:200px;
height:30px;
top:350px;}
</style>
<body class="body">
<button class="up" style="margin-left:29px;">up</button><br>
<button class="left">left</button>
<button class="right">right</button><br>
<button class="down" style="margin-left:19px;">down</button>
<div class="position"><div class="navigate"></div></div>
<script>
$('.down').click(function(){
$('.navigate').animate({
'top':'+=50px'}, "slow");
});
$('.right').click(function(){
$('.navigate').animate({
'left':'+=50px'}, "slow");
});
$('.up').click(function(){
$('.navigate').animate({
'top':'-=50px'}, "slow");
});
$('.left').click(function(){
$('.navigate').animate({
'left':'-=50px'}, "slow");
});
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar
Leave a message