读书人

jquery offset() 简略使用

发布时间: 2013-10-19 20:58:22 作者: rapoo

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>

?
jquery offset()  简略使用
?

读书人网 >Web前端

热点推荐