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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="centerdiv">
            <div class="container">
                <div id="follower"> </div>
                <div class="buttons">
                    <span title="button1">Button1</span>
                    <span title="button2">Button2</span>
                </div>
            </div>
    <div class="container1">
      MousePad <br/>
     select above div buttons and click using this div mouse moving with the help follwer 
        </div>
        </div>
        
</body>
</html>
 
#follower{
  position : relative;
  background-color : yellow;
 
  width:15px;
  height:15px;
  margin-left:-8px;
  margin-top:-8px;
  border-radius:50px;
}
.buttons span:hover{
    border:2px solid red;
    
}
.centerdiv {
    width:150px;
    float:left;
    position:relative;
  clear:both;
  display:block;
}
​
.container1{
    width:150px;
    height:150px;
    border:1px solid #000;
    cursor:none;
    margin-top:20px;
    clear:both;
    margin-left:100px;
}
.buttons span{
    width:100px;
    heigh:20px;
    float:left;
    background:#ccc;
    border:1px solid #000;
    margin-left:30px;
    
}
.container
{
    width:450px;
    height:450px; 
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
}
 
var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container1').mousemove(function(e){
  var offset = $('.container1').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
    mouseX=mouseX*3;
    mouseY=mouseY*3;
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});
​
// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp);
    yp += (mouseY - yp) ;
    follower.css({left:xp, top:yp});
    
    }, 30);
$('.buttons span').bind('click',function(){
    alert($(this).attr('title'));  
  
  });
Output 300px

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

Dismiss x
public
Bin info
sarath704pro
0viewers