首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery offset() 简略使用

2013-10-19 
jquery offset()简单使用htmlheadstyle typetext/cssdiv{background-color:#66FF66width:100px

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()  简略使用
?

热点排行