jquery任意位置浮动固定层插件用法实例


Posted in Javascript onMay 29, 2015

本文实例讲述了jquery任意位置浮动固定层插件用法。分享给大家供大家参考。具体分析如下:

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

2009-06-10修改:重新修改插件实现固定浮动层的方式,使用一个大固定层来定位  
2009-07-16修改:修正IE6下无法固定在top上的问题  

09-11-5修改:当自定义层的绝对位置时,加上top为空值时的判断  
这次的方法偷自天涯新版页  
经多次测试,基本上没bug~  

调用:

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

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

2 内置固定位置浮动

//右下角  
$("#id").floatdiv("rightbottom");  
//左下角  
$("#id").floatdiv("leftbottom");  
//右下角  
$("#id").floatdiv("rightbottom");  
//左上角  
$("#id").floatdiv("lefttop");  
//右上角  
$("#id").floatdiv("righttop");  
//居中  
$("#id").floatdiv("middle");

另外新添加了四个新的固定位置方法  

middletop(居中置顶)、middlebottom(居中置低)、leftmiddle、rightmiddle

3 自定义位置浮动

$("#id").floatdiv({left:"10px",top:"10px"});  
以上参数,设置浮动层在left 10个像素,top 10个像素的位置  

jQuery.fn.floatdiv=function(location){  
  //判断浏览器版本  
  var isIE6=false;  
  var Sys = {};  
  var ua = navigator.userAgent.toLowerCase();  
  var s;  
  (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;  
  if(Sys.ie && Sys.ie=="6.0"){  
    isIE6=true;  
  }  
  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;  
  }  
  return this.each(function(){  
    var loc;//层的绝对定位位置  
    var wrap=$("<div></div>");  
    var top=-1;  
    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"};  
          top=0;  
          break;  
        case("righttop")://右上角  
          loc={right:"0px",top:"0px"};  
          top=0;  
          break;  
        case("middletop")://居中置顶  
          loc={left:windowWidth/2-$(this).width()/2+"px",top:"0px"};  
          top=0;  
          break;  
        case("middlebottom")://居中置低  
          loc={left:windowWidth/2-$(this).width()/2+"px",bottom:"0px"};  
          break;  
        case("leftmiddle")://左边居中  
          loc={left:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
          top=windowHeight/2-$(this).height()/2;  
          break;  
        case("rightmiddle")://右边居中  
          loc={right:"0px",top:windowHeight/2-$(this).height()/2+"px"};  
          top=windowHeight/2-$(this).height()/2;  
          break;  
        case("middle")://居中  
          var l=0;//居左  
          var t=0;//居上  
          l=windowWidth/2-$(this).width()/2;  
          t=windowHeight/2-$(this).height()/2;  
          top=t;  
          loc={left:l+"px",top:t+"px"};  
          break;  
        default://默认为右下角  
          location="rightbottom";  
          loc={right:"0px",bottom:"0px"};  
          break;  
      }  
    }else{  
      loc=location;  
      alert(loc.bottom);  
      var str=loc.top;  
      //09-11-5修改:加上top为空值时的判断  
      if (typeof(str)!= 'undefined'){  
        str=str.replace("px","");  
        top=str;  
      }  
    }  
    /*fied ie6 css hack*/  
    if(isIE6){  
      if (top>=0)  
      {  
        wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+"+top+");\"></div>");  
      }else{  
        wrap=$("<div style=\"top:e­xpression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);\"></div>");
      }  
    }  
    $("body").append(wrap);  
    wrap.css(loc).css({position:"fixed",z_index:"999"});  
    if (isIE6)  
    {  
      wrap.css("position","absolute");  
      //没有加这个的话,ie6使用表达式时就会发现跳动现象  
      //至于为什么要加这个,还有为什么要加nothing.txt这个,偶也不知道,希望知道的同学可以告诉我  
      $("body").css("background-attachment","fixed").css("background-image","url(n1othing.txt)");  
    }  
    //将要固定的层添加到固定层里  
    $(this).appendTo(wrap);  
  });  
};

完整实例代码点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jquery $.ajax入门应用二
Nov 19 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
浅析javascript的return语句
Dec 15 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
js实现发送验证码后的倒计时功能
May 28 #Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
jquery实现用户打分评分特效
May 28 #Javascript
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
php PDO异常处理详解
2016/11/20 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
ASP Json Parser修正版
2009/12/06 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
保安自我鉴定范文
2013/12/08 职场文书
教师党员思想汇报
2014/01/06 职场文书
霸气队列口号
2014/06/18 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2014年组织部工作总结
2014/11/14 职场文书
2014年科研工作总结
2014/12/03 职场文书
爱晚亭导游词
2015/02/09 职场文书
护理心得体会范文
2016/01/22 职场文书
九年级化学教学反思
2016/02/22 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技