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 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
JS随机密码生成算法
Sep 23 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php数组查找函数总结
2014/11/18 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
javascript 计算两个整数的百分比值
2009/12/26 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
全面解读Python Web开发框架Django
2014/06/30 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
教师实习自我鉴定
2013/12/13 职场文书
旷课检讨书大全
2014/01/21 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
个人党性剖析材料
2014/02/03 职场文书
高中军训感言800字
2014/03/05 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL