jquery offset() 简略使用 _Web前端

jquery offset() 简单使用
<html>
<head>
<style type="text/css">
div{  
background-color:#66FF66;  
width:100px;  
height:100px; 
}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

  //使用值对，来为对象设置新的 offset 值
  $("#bt1").click(function(){
    $("div").offset({top:50,left:0});
    showOffset();
  });
  
  //使用带有 top 和 left 属性的对象，来为对象设置新的 offset 值
  $("#bt2").click(function(){
    var newPos=new Object();
    newPos.left="50";
    newPos.top="100";
    $("div").offset(newPos);
    showOffset();
  });
  
  //使用函数设置新的偏移
    $("#bt3").click(function(){
    $("div").offset(function(index,oldoffset){
    	var newPos=new Object();
        newPos.left=oldoffset.left+10;
        newPos.top=oldoffset.top+10;
        return newPos;
    });
    showOffset();
  });
  
  //使用已有对象的位置来定位元素。
  $("#bt4").click(function(){
    $("div").offset($("#bt4").offset());
    showOffset();
  });
     
     //显示div当前的位置
   function showOffset(){
     var left = $("div").offset().left;
     var top = $("div").offset().top;
     $("div").html("当前位置：left="+left+", top="+top);
   }
    showOffset();
});
</script>
</head>
<body>
<div></div>
<button id='bt1'>使用值对，设置新的偏移</button>
<br>
<button id='bt2'>使用对象，设置新的偏移</button>
<br>
<button id='bt3'>使用函数，设置新的偏移</button>
<br>
<button id='bt4'>使用已有对象的位置来定位元素</button>
</body>
</html>
?

?