这篇文章主要介绍了jQuery实现可兼容IE6的监听功能,结合实例形式分析了jQuery针对不同浏览器的事件监听、响应及页面属性动态变换相关实现,需要的朋友可以参考下

本文实例讲述了jQuery实现可兼容IE6的监听功能。分享给大家供大家参考,具体如下:

其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听条的过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行。

将实现如下的效果:

也就是在网页中有点常见的监听。相应的标题,滚到哪里,则左边的条当前标题前的。。。就变成》》》,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方。

首先是网页布局部分,代码如下,请忽略大堆的JavaScript介绍,只是为了占格子,说明效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>监听</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/ie6fixed.js"></script>
  </head>
  <body>
    <div>
      <div>
        <div id="scrollspy">
        <div id="debug"></div>
        </div>
      </div>
      <div id="content">
        <p>英文介绍</p>
        <p>JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation. It is also used in game development, the creation of desktop and mobile applications, and server-side network programming with runtime environments such as Node.js.</p>
        <p>由来</p>
        <p>Netscape在最初将其脚本语言命名为LiveScript,后来网景在与昇阳公司合作之后将其改名为JavaScript[7]。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[8],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[9]。JavaScript与Java名称上的近似,是当时网景为了营销考虑与太阳微系统达成协议的结果。为了获取技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。</p>
        <p>区别</p>
        <p>不同于服务器端脚本语言,例如PHP与ASP,JavaScript主要被作为客户端脚本语言在用户的浏览器上运行,不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的,虽然现在的程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时,有些特殊功能(如AJAX)必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展,及其事件驱动及异步IO等特性,JavaScript逐渐被用来编写服务器端程序。</p>
        <p>标题2</p>
        <p>Netscape在最初将其脚本语言命名为LiveScript,后来网景在与昇阳公司合作之后将其改名为JavaScript[7]。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[8],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[9]。JavaScript与Java名称上的近似,是当时网景为了营销考虑与太阳微系统达成协议的结果。为了获取技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。</p>
      </div>
    </div>
  </body>
</html>

基本思想如下:

这里,

(1)在第12行故意放一个空格,是因为不要让<div></div>这个div空空是也,以致于没有了宽度。

(2)为了使IE6支持position:fixed属性,引入了如下的一个ie6fixed.js,这东西的出处已经无从可考,新建一个js文件,拷贝下面的代码保存,在编辑网页的时候为了使IE6支持position:fixed引入这段脚本,同时对要在IE6实现position:fixed的脚本处,使用$("#div名称").toFixed();便兼容。

ie6fixed.js:

(function($){
  var isIE = !!window.ActiveXObject;
  var isIE6 = isIE && !window.XMLHttpRequest;
  var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
  var isIE7 = isIE && !isIE6 && !isIE8;
  if (isIE6 || isIE7) { //ie6 | ie7 | ie8 not in standards mode
    $().ready(function(){
      var body = document.body;
      var BLANK_GIF;
      if (body.currentStyle.backgroundAttachment != "fixed") {
        if (body.currentStyle.backgroundImage == "none") {
          body.runtimeStyle.backgroundImage = "url(" + BLANK_GIF + ")"; // dummy
          body.runtimeStyle.backgroundAttachment = "fixed";
        }
      }
    });
  }
  $.fn.extend({
    toFixed: function(position){
      var isIE = !!window.ActiveXObject;
      var isIE6 = isIE && !window.XMLHttpRequest;
      var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);
      var isIE7 = isIE && !isIE6 && !isIE8;
      if (isIE6 || isIE7) {
      }
      else {
        return this;
      }
      return this.each(function(){
        var t = $(this);
        var id = t.get(0).id || 'fixed_' + parseInt(Math.rand() * 10000);
        var rect = {
          w: t.width(),
          h: t.height(),
          l: t.css('left'),
          r: t.css('right'),
          't': t.css('top'),
          b: t.css('bottom')
        };
        if (rect.l != 'auto') {
          rectl = parseInt(rect.l);
        }
        else {
          rectl = 0;
        }
        if (rect.r != 'auto') {
          rectr = parseInt(rect.r);
        }
        else {
          rectr = 0;
        }
        if (rect.t != 'auto') {
          rectt = parseInt(rect.t);
        }
        else {
          rectt = 0;
        }
        if (rect.b != 'auto') {
          rectb = parseInt(rect.b);
        }
        else {
          rectb = 0;
        }
        var _pos = {
          left: rect.l,
          right: rect.r,
          top: rect.t,
          bottom: rect.b
        };
        _pos = $.extend(_pos, position);
        var css = t.attr('style') + ';';
        css += 'position:absolute;bottom:auto;right:auto;clear:both;';
        if (rect.l != 'auto' && rect.r != 'auto')
          css += 'width:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.clientWidth - ' + rectl + ' - ' + rectr + ' : document.body.clientWidth - ' + rectl + ' - ' + rectr + ' );';
        if (rect.l == 'auto' && rect.r != 'auto')
          css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - ' + rectr + ') : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - ' + rectr + '));';
        else
          css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + ' + rectl + ' : document.body.scrollLeft + ' + rectl + ');';
        if (rect.t == 'auto' && rect.b != 'auto')
          css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - ' + rectb + ') : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - ' + rectb + '));';
        else
          css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + ' + rectt + ' : document.body.scrollTop + ' + rectt + ');';
        t.attr('style', css);
      });
    }
  });
})(jQuery);

随后,以下的核心脚本才是本页面实现的关键所在:

<script type="text/javascript">
  $("#scrollspy").toFixed();//让scrollspy这个div在IE6同样可以position:fixed;
  //开始先遍历标题,生产目录
  var title_counter=0;
  $(".title").each(function(){
    title_counter++;
    //对于每一个class为title的标题设置锚点,同时在#scrollspy同生产每一个锚点的链接
    $(this).attr("id","title"+title_counter);
    $("#scrollspy").append("<p><a href='#title"+title_counter+"'>。。。"+$(this).html()+"</a></p>");
    //这里使用到<div>与<p>的组合,而不是<ul>与<li>,<ul>与<li>没有position:fixed;属性。不能不随的移动而移动。
  });
  //之后是显示事件,条一旦都会触发这个事件
  $(window).scroll(function() {
    var height_now=$(window).scrollTop();//取当前条的高度位置
    title_counter=0;
    var title_now=0;//再次遍历左边的目录
    $(".title").each(function(){
      $("#scrollspy>p:eq("+title_counter+")>a").html("。。。"+$(this).html());//先将所有目录前的符号重新变成。。。
      if(height_now>$(this).offset().top){
        title_now++;//$(this).offset().top取出各个标题的高度位置,看当前条的高度位置迈过了多少个标题
      }
      title_counter++;
    });
    $("#debug").html("当前高度:"+height_now+"px,标题数:"+title_counter+",当前标题为:"+title_now);//这行只是为了输出信息给大家看清楚,可以没有
    if(title_now>title_counter-1){//主要是防止某些浏览器到最底部,无法定位到最后一个标题的现象
      title_now=title_counter-1;
    }
    $("#scrollspy>p:eq("+title_now+")>a").html("》》》"+$(".title:eq("+title_now+")").html());//对当前条的高度位置迈过的最后一个标题前的。。。换成》》》
  });
</script>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与总结》、《jQuery拖拽特效与总结》、《jQuery扩展总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

最新资讯
安全问题待解 特斯拉市值还能涨多久?

安全问题待解 特斯拉

突飞猛进似乎是这一年特斯拉的主题,不过在11月的最后一
猛涨闪崩 比特币经历了什么?

猛涨闪崩 比特币经历

币圈的世界,总是充满着刺激和不确定。
这个“黑五”有点冷:疫情带来健康和财务双重压力

这个“黑五”有点冷:疫

受新冠疫情影响,今年“黑五”选择到店购物的美国消费者
代销乱象难解 “李鬼”信托扯出诈骗产业链

代销乱象难解 “李鬼

金融行业、产品“触网”背景下,人们获取信息的渠道更加
跨境电商“眼馋”私域流量 熟人带货会是考拉的出路吗?

跨境电商“眼馋”私域

跨境电商对私域流量念念不忘。
网传虾米音乐将于明年关闭 官方暂无回应

网传虾米音乐将于明年

有用户在社交平台上称虾米音乐将于明年1月关闭。新浪
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,