华山资源网

jQuery实现可兼容IE6的滚动监听功能
网络编程 2024/11/15 佚名
3 1

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

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

将实现如下的效果：

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="/UploadFiles/2021-04-02/jquery-1.11.1.js">


基本思想如下：


jQuery实现可兼容IE6的滚动监听功能


这里，


（1）在第12行故意放一个空格，是因为不要让<div style="float:left;width:20%;"></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\') "htmlcode">



<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程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com