jQuery 位置插件

  插件代码:

  /*任意位置浮动固定层*/

  /*没剑(http://regedit.cnblogs.com) 08-03-11*/

  /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/

  /*2008-4-1修改:当自定义right位置时无效,这里加上一个判断

  有值时就不设置,无值时要加18px已修正层位置在ie6下的问题

  */

  /*调用:

  1 无参数调用:默认浮动在右下角

  $("#id").floatdiv();

  2 内置固定位置浮动

  //右下角

  $("#id").floatdiv("rightbottom");

  //左下角

  $("#id").floatdiv("leftbottom");

  //右下角

  $("#id").floatdiv("rightbottom");

  //左上角

  $("#id").floatdiv("lefttop");

  //右上角

  $("#id").floatdiv("righttop");

  //居中

  $("#id").floatdiv("middle");

  3 自定义位置浮动

  $("#id").floatdiv({left:"10px",top:"10px"});

  以上参数,设置浮动层在left 10个像素,top 10个像素的位置

  */

  jQuery.fn.floatdiv=function(location){

  //ie6要隐藏纵向滚动条

  var isIE6=false;

  if($.browser.msie && $.browser.version=="6.0"){

  $("html").css("overflow-x","auto").css("overflow-y","hidden");

  isIE6=true;

  };

  $("body").css({margin:"0px",padding:"0 10px 0 10px",

  border:"0px",

  height:"100%",

  overflow:"auto"

  });

  return this.each(function(){

  var loc;//层的绝对定位位置

  if(location==undefined || location.constructor == String){

  switch(location){

  case("rightbottom")://右下角

  loc={right:"0px",bottom:"0px"};

  break;

  case("leftbottom")://左下角

  loc={left:"0px",bottom:"0px"};

  break;

  case("lefttop")://左上角

  loc={left:"0px",top:"0px"};

  break;

  case("righttop")://右上角

  loc={right:"0px",top:"0px"};

  break;

  case("middle")://居中

  var l=0;//居左

  var t=0;//居上

  var windowWidth,windowHeight;//窗口的高和宽

  //取得窗口的高和宽

  if (self.innerHeight) {

  windowWidth=self.innerWidth;

  windowHeight=self.innerHeight;

  }else if (document.documentElement&&document.documentElement.clientHeight) {

  windowWidth=document.documentElement.clientWidth;

  windowHeight=document.documentElement.clientHeight;

  } else if (document.body) {

  windowWidth=document.body.clientWidth;

  windowHeight=document.body.clientHeight;

  }

  l=windowWidth/2-$(this).width()/2;

  t=windowHeight/2-$(this).height()/2;

  loc={left:l+"px",top:t+"px"};

  break;

  default://默认为右下角

  loc={right:"0px",bottom:"0px"};

  break;

  }

  }else{

  loc=location;

  }

  $(this).css("z-index","9999").css(loc).css("position","fixed");

  if(isIE6){

  if(loc.right!=undefined){

  //2008-4-1修改:当自定义right位置时无效,这里加上一个判断

  //有值时就不设置,无值时要加18px已修正层位置

  if($(this).css("right")==null || $(this).css("right")==""){

  $(this).css("right","18px");

  }

  }

  $(this).css("position","absolute");

  }

  });

  };

  使用方法:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

  <title>任意位置浮动窗口插件</title>

  <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>

  <script type="text/javascript" src="../js/jquery.floatDiv.js"></script>

  <script type="text/javascript">

  $(function(){

  $("#test").floatdiv({top:"200px",right:"200px"});

  $("#rtop").floatdiv("righttop");

  $("#floatAd").floatdiv({top:"50px",left:"50px"});

  });

  </script>

  </head>

  <body>

  <div id="rtop" style="background-color: #666633; width: 300px; height: 100px;padding:2px;color:white;">右上角</div>

  <div id="floatAd" style="background-color: #667733; width: 300px; height: 100px;padding:2px;color:white;">左下角</div>

  <div id="test" style="background-color: #665533; width: 300px; height: 100px;padding:2px;color:white;">

  <p>

  /*任意位置浮动固定层*/<br />

  /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/<br />

  /*调用:<br />

  1 无参数调用:默认浮动在右下角<br />

  $("#id").floatdiv();</p>

  <p>

  2 内置固定位置浮动<br />

  //右下角<br />

  $("#id").floatdiv("rightbottom");<br />

  //左下角<br />

  $("#id").floatdiv("leftbottom");<br />

  //右下角<br />

  $("#id").floatdiv("rightbottom");<br />

  //左上角<br />

  $("#id").floatdiv("lefttop");<br />

  //右上角<br />

  $("#id").floatdiv("righttop");<br />

  //居中<br />

  $("#id").floatdiv("middle");</p>

  <p>

  3 自定义位置浮动<br />

  $("#id").floatdiv({left:"10px",top:"10px"});<br />

  以上参数,设置浮动层在left 10个像素,top 10个像素的位置<br />

  */</p>

  </div>

  <div>hello<br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  <br />

  hello

  </div>

  </body>

  </html>