技术文章 订阅所有【技术文章】的日志

jquery页面中固定显示div层

作者:admin 日期:2012-04-27

字体大小: 小 中 大

这个是别人写的代码，自己实际用的时候对代码做了改动，主要需要新增一些功能！ 

JavaScript代码
  1. /*任意位置浮动固定层*/  
  2. /*没剑(http://regedit.cnblogs.com) 2009-03-04*/  
  3. /*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/  
  4. /*2009-06-10修改：重新修改插件实现固定浮动层的方式，使用一个大固定层来定位 
  5. /*2009-07-16修改：修正IE6下无法固定在top上的问题 
  6. /*09-11-5修改：当自定义层的绝对位置时，加上top为空值时的判断 
  7. 这次的方法偷自天涯新版页 
  8. 经多次测试，基本上没bug~ 
  9. 有问题的朋友欢迎到偶的博客http://regedit.cnblogs.com上提出 
  10. */  
  11. /*调用： 
  12. 1 无参数调用：默认浮动在右下角 
  13. $("#id").floatdiv(); 
  14.  
  15. 2 内置固定位置浮动 
  16. //右下角 
  17. $("#id").floatdiv("rightbottom"); 
  18. //左下角 
  19. $("#id").floatdiv("leftbottom"); 
  20. //右下角 
  21. $("#id").floatdiv("rightbottom"); 
  22. //左上角 
  23. $("#id").floatdiv("lefttop"); 
  24. //右上角 
  25. $("#id").floatdiv("righttop"); 
  26. //居中 
  27. $("#id").floatdiv("middle"); 
  28.  
  29. 另外新添加了四个新的固定位置方法 
  30.  
  31. middletop（居中置顶）、middlebottom（居中置低）、leftmiddle、rightmiddle 
  32.  
  33. 3 自定义位置浮动 
  34. $("#id").floatdiv({left:"10px",top:"10px"}); 
  35. 以上参数，设置浮动层在left 10个像素,top 10个像素的位置 
  36. */  
  37. jQuery.fn.floatdiv=function(location){  
  38.         //判断浏览器版本  
  39.     var isIE6=false;  
  40.     var Sys = {};  
  41.     var ua = navigator.userAgent.toLowerCase();  
  42.     var s;  
  43.     (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;  
  44.     if(Sys.ie && Sys.ie=="6.0"){  
  45.         isIE6=true;  
  46.     }  
  47.     var windowWidth,windowHeight;//窗口的高和宽  
  48.     //取得窗口的高和宽  
  49.     if (self.innerHeight) {  
  50.         windowWidth=self.innerWidth;  
  51.         windowHeight=self.innerHeight;  
  52.     }else if (document.documentElement&&document.documentElement.clientHeight) {  
  53.         windowWidth=document.documentElement.clientWidth;  
  54.         windowHeight=document.documentElement.clientHeight;  
  55.     } else if (document.body) {  
  56.         windowWidth=document.body.clientWidth;  
  57.         windowHeight=document.body.clientHeight;  
  58.     }  
  59.     return this.each(function(){  
  60.         var loc;//层的绝对定位位置  
  61.         var wrap=$("<div></div>");  
  62.         var top=-1;  
  63.         if(location==undefined || location.constructor == String){  
  64.             switch(location){  
  65.                 case("rightbottom")://右下角  
  66.                     loc={right:"0px",bottom:"0px"};  
  67.                     break;  
  68.                 case("leftbottom")://左下角  
  69.                     loc={left:"0px",bottom:"0px"};  
  70.                     break;    
  71.                 case("lefttop")://左上角  
  72.                     loc={left:"0px",top:"0px"};  
  73.                     top=0;  
  74.                     break;  
  75.                 case("righttop")://右上角  
  76.                     loc={right:"0px",top:"0px"};  
  77.                     top=0;  
  78.                     break;  
  79.                 case("middletop")://居中置顶  
  80.                     loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};  
  81.                     top=0;  
  82.                     break;  
  83.                 case("middlebottom")://居中置低  
  84.                     loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};  
  85.                     break;  
  86.                 case("leftmiddle")://左边居中  
  87.                     loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
  88.                     top=windowHeight/2-$(this).height()/2;  
  89.                     break;  
  90.                 case("rightmiddle")://右边居中  
  91.                     loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
  92.                     top=windowHeight/2-$(this).height()/2;  
  93.                     break;  
  94.                 case("middle")://居中  
  95.                     var l=0;//居左  
  96.                     var t=0;//居上  
  97.                     l=windowWidth/2-$(this).width()/2;  
  98.                     t=windowHeight/2-$(this).height()/2;  
  99.                     top=t;  
  100.                     loc={left:l+"px",top:t+"px"};  
  101.                     break;  
  102.                 default://默认为右下角  
  103.                     location="rightbottom";  
  104.                     loc={right:"0px",bottom:"0px"};  
  105.                     break;  
  106.             }  
  107.         }else{  
  108.             loc=location;  
  109.             alert(loc.bottom);  
  110.             var str=loc.top;  
  111.             //09-11-5修改：加上top为空值时的判断  
  112.             if (typeof(str)!= 'undefined'){  
  113.                 str=str.replace("px","");  
  114.                 top=str;  
  115.             }  
  116.         }  
  117.         /*fied ie6 css hack*/  
  118.         if(isIE6){  
  119.             if (top>=0)  
  120.             {  
  121.                 wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+"+top+");\"></div>");  
  122.             }else{  
  123.                 wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");  
  124.             }  
  125.         }  
  126.         $("body").append(wrap);  
  127.           
  128.         wrap.css(loc).css({position:"fixed",  
  129.             z_index:"999"});  
  130.         if (isIE6)  
  131.         {  
  132.               
  133.             wrap.css("position","absolute");  
  134.             //没有加这个的话，ie6使用表达式时就会发现跳动现象  
  135.             //至于为什么要加这个，还有为什么要加nothing.txt这个，偶也不知道，希望知道的同学可以告诉我  
  136.             $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");  
  137.         }  
  138.         //将要固定的层添加到固定层里  
  139.         $(this).appendTo(wrap);  
  140.     });  
  141. };  

下载地址：http://files.cnblogs.com/regedit/jquery.floatdiv.rar

原文网址：http://www.cnblogs.com/regedit/archive/2008/03/11/1100170.html



上一篇: Asp利用MID分割字符示例
下一篇: PHP中逗号和点号的区别
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: javascript jquery
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3941
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭

 广告位

↑返回顶部↑