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 相关文章推荐
二级域名转向类
Nov 09 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
微信小程序 教程之引用
Oct 18 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
koa-router路由参数和前端路由的结合详解
May 19 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
JS如何把字符串转换成json
Feb 21 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
Smarty模板语法详解
2019/07/20 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
PyMongo安装使用笔记
2015/04/27 Python
python 排序算法总结及实例详解
2016/09/28 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python tornado上传文件的功能
2020/03/26 Python
详解python内置模块urllib
2020/09/09 Python
python基于opencv实现人脸识别
2021/01/04 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
Java基础面试题
2014/07/19 面试题
函授本科自我鉴定
2013/11/03 职场文书
八一建军节演讲稿
2014/09/10 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
商业用房租赁协议书
2014/10/13 职场文书
涨价通知
2015/04/23 职场文书