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 哈希表(hashtable)的简单实现
Jan 20 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
Webpack3+React16代码分割的实现
Mar 03 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
第十节--抽象方法和抽象类
2006/11/16 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python守护进程用法实例分析
2015/06/04 Python
Python数据结构之单链表详解
2017/09/12 Python
python之pandas用法大全
2018/03/13 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
超市促销活动方案
2014/03/05 职场文书
公关活动策划方案
2014/05/25 职场文书
篮球比赛口号
2014/06/10 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2015年党性分析材料
2014/12/19 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
离婚律师函范本
2015/05/27 职场文书