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>

　　推荐阅读

　　JavaScript 事件参考手册

click() 对象.click() 使对象被点击。 closed 对象.closed 对象窗口是否已关闭true/false clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 confirm("提示信息") >>>详细阅读

本文标题：jQuery 位置插件

地址：http://www.17bianji.com/kaifa2/JS/29085.html

1/2 1