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

本文实例讲述了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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 插件
, 浮动
, 固定层
任意位置
浮动的用法、浮动实例、jquery 浮动窗口、jquery浮动层插件、jquery 浮动层,以便于您获取更多的相关知识。

时间: 2016-05-29

jquery任意位置浮动固定层插件用法实例_jquery的相关文章

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

  本文实例讲述了jquery任意位置浮动固定层插件用法.分享给大家供大家参考.具体分析如下: 说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动 2009-06-10修改:重新修改插件实现固定浮动层的方式,使用一个大固定层来定位 2009-07-16修改:修正IE6下无法固定在top上的问题 09-11-5修改:当自定义层的绝对位置时,加上top为空值时的判断 这次的方法偷自天涯新版页 经多次测试,基本上没bug~ 调用: 1 无参数调用:默认浮动在

jQuery simplePage+AJAX plus分页插件用法实例_jquery

本文实例讲述了jQuery simplePage+AJAX plus分页插件.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

jquery 插件 任意位置浮动固定层_jquery

/*任意位置浮动固定层*/ /*没剑(http://regedit.cnblogs.com) 08-03-11*/ /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id&qu

jQuery实现的输入框选择时间插件用法实例

 这篇文章主要介绍了jQuery实现的输入框选择时间插件用法,实例分析了jQuery插件jquery.settime.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery实现的输入框选择时间插件用法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

jQuery菜单插件用法实例_jquery

本文实例讲述了jQuery菜单插件用法.分享给大家供大家参考.具体如下: 这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式. jQuery菜单插件js文件: /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) { $.fn.keleyi = f

jQuery使用之标记元素属性用法实例_jquery

本文实例讲述了jQuery使用之标记元素属性用法.分享给大家供大家参考.具体分析如下: 这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性.css样式风格.DOM模型.表单元素和事件处理等. 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记 复制代码 代码如下: <a herf="http://www.baidu.com" title="isaac" target=&

JQuery中的事件及动画用法实例_jquery

本文实例讲述了JQuery中的事件及动画用法.分享给大家供大家参考.具体分析如下: 1.bind事件 复制代码 代码如下: <script src="script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一

jQuery使用之处理页面元素用法实例_jquery

本文实例讲述了jQuery使用之处理页面元素用法.分享给大家供大家参考.具体分析如下: 对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.这里将介绍一些常用的内容. 1.直接获取.编辑内容. 在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容.其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml

jQuery回调函数的定义及用法实例_jquery

本文实例讲述了jQuery回调函数的定义及用法.分享给大家供大家参考.具体分析如下: jQuery代码中对回调函数有着广泛的应用,对其有精准的理解是非常有必要的,下面就通过实例对此方法进行简单的介绍. 代码实例如下: 利用回调函数,当div全部隐藏之后弹出一个提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="a