jquery插件-任意位置浮动固定层

可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动
作者:没剑
本地下载:jquery-floatdiv
源码及调用方法:

  1. /*任意位置浮动固定层*/
  2. /*没剑(http://regedit.cnblogs.com) 2009-03-04*/
  3. /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/
  4. /*2009-03-04修改:重新修改插件实现固定浮动层的方式,使用一个大固定层来定位
  5. 从gmail的信息浮动窗口中偷来的,呵呵
  6. 经多次测试,基本上没bug~
  7. 有问题的朋友欢迎到偶的博客http://regedit.cnblogs.com上提出
  8. */
  9. /*调用:
  10. 1 无参数调用:默认浮动在右下角
  11. $("#id").floatdiv();
  12. 2 内置固定位置浮动
  13. //右下角
  14. $("#id").floatdiv("rightbottom");
  15. //左下角
  16. $("#id").floatdiv("leftbottom");
  17. //右下角
  18. $("#id").floatdiv("rightbottom");
  19. //左上角
  20. $("#id").floatdiv("lefttop");
  21. //右上角
  22. $("#id").floatdiv("righttop");
  23. //居中
  24. $("#id").floatdiv("middle");
  25. 另外新添加了四个新的固定位置方法
  26. middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle
  27. 3 自定义位置浮动
  28. $("#id").floatdiv({left:"10px",top:"10px"});
  29. 以上参数,设置浮动层在left 10个像素,top 10个像素的位置
  30. */
  31. jQuery.fn.floatdiv=function(location){
  32. //判断浏览器版本
  33. varisIE6=false;
  34. varSys={};
  35. varua=navigator.userAgent.toLowerCase();
  36. vars;
  37. (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:0;
  38. if(Sys.ie&&Sys.ie=="6.0"){
  39. isIE6=true;
  40. }
  41. varwindowWidth,windowHeight;//窗口的高和宽
  42. //取得窗口的高和宽
  43. if(self.innerHeight){
  44. windowWidth=self.innerWidth;
  45. windowHeight=self.innerHeight;
  46. }elseif(document.documentElement&&document.documentElement.clientHeight){
  47. windowWidth=document.documentElement.clientWidth;
  48. windowHeight=document.documentElement.clientHeight;
  49. }elseif(document.body){
  50. windowWidth=document.body.clientWidth;
  51. windowHeight=document.body.clientHeight;
  52. }
  53. returnthis.each(function(){
  54. varloc;//层的绝对定位位置
  55. if(location==undefined||location.constructor==String){
  56. switch(location){
  57. case("rightbottom")://右下角
  58. loc={right:"0px",bottom:"0px"};
  59. break;
  60. case("leftbottom")://左下角
  61. loc={left:"0px",bottom:"0px"};
  62. break;
  63. case("lefttop")://左上角
  64. loc={left:"0px",top:"0px"};
  65. break;
  66. case("righttop")://右上角
  67. loc={right:"0px",top:"0px"};
  68. break;
  69. case("middletop")://居中置顶
  70. loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};
  71. break;
  72. case("middlebottom")://居中置低
  73. loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};
  74. break;
  75. case("leftmiddle")://左边居中
  76. loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};
  77. break;
  78. case("rightmiddle")://右边居中
  79. loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};
  80. break;
  81. case("middle")://居中
  82. varl=0;//居左
  83. vart=0;//居上
  84. l=windowWidth/2-$(this).width()/2;
  85. t=windowHeight/2-$(this).height()/2;
  86. loc={left:l+"px",top:t+"px"};
  87. break;
  88. default://默认为右下角
  89. location="rightbottom";
  90. loc={right:"0px",bottom:"0px"};
  91. break;
  92. }
  93. }else{
  94. loc=location;
  95. }
  96. $(this).css(loc).css("position","fixed");
  97. /*fied ie6 css hack*/
  98. if(isIE6)
  99. {
  100. $(this).css(loc).css("position","absolute");
  101. /*设置浮动层的位置*/
  102. //var offset=$(this).offset();
  103. //$(this).css({top:offset.top+"px",left:offset.left+"px"});
  104. $("body").css({margin:"0px",height:"100%",overflow:"auto"}).css("overflow_y","auto");
  105. $("html").css({overflow:"hidden"}).css("overflow_x","auto").css("overflow_y","hidden");
  106. /*修正ie6下浮动层在右边显示时出现在滚动条上的问题*/
  107. if(isIE6&&loc.right=="0px"){
  108. $(this).css("right","18px");
  109. }
  110. }
  111. });
  112. };

标签: Jquery, jquery-floatdiv

评论已关闭