Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
 
  
<style>
    .button:hover{
        opacity: 0.5;
    }
​
    .button{
        position: absolute;
    }
​
    .compass{
        position: absolute;
    }
​
    div.pan{
        position: absolute;
        width: 90px;
        height: 90px;
    }
​
    #moveme{
        position: absolute;
        top: 200px;
        left: 200px;
    }
</style>
  
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
​
</head>
<body>
<div class="pan">
    <p class="button"
         style="top: 0px; left: 30px;"
      
         onmouseover="startPan('up')"
  onmouseout="stopPan()" > up</p>
  
    <p  class="button" 
         style="top: 30px; right: 0px;"         
        
         onmouseover="startPan('right')"
         onmouseout="stopPan()">right </p>  
  
​
    <p  class="button" 
         style="bottom: 0px; left: 30px;"         
         
         onmouseover="startPan('down')"
         onmouseout="stopPan()">down </p>     
​
    <p class="button" 
         style="top: 30px; left: 0px;"         
        
         onmouseover="startPan('left')"
         onmouseout="stopPan()">left </p>
​
    <p  class="compass"
         style="top: 21px; left: 21px;"
         >compass </p>
​
</div>
​
<div id="moveme">
    HELLo
</div>
</body>
</html>
 
      
    
function startPan(dir){
            panning = true;
            direction = dir;
        }  
​
        function stopPan(){
            panning = false;
        }
​
        function pan(){  
            var item = $("#moveme"); 
            var x = item.position().left; 
            var y = item.position().top;            
            var amount = 1;
            if(direction == "left"){
                x -= amount;
            } else if (direction == "right"){
                x += amount ;
            } else if (direction == "up"){
                y -= amount;
            } else if (direction == "down"){
                y += amount;
            }
​
            item.css("left", x);
            item.css("top", y);
        }
​
        function panLoop(){          
            if(panning === true){      
                pan();
            }
        }
​
$(document).ready(function(){
        var panning = false;
        var direction;
​
        
        setInterval(panLoop,100);
    });
​
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers