recherche

Maison  >  Article  >  interface Web  >  jQuery implémente la fonction de surveillance de défilement compatible avec IE6_jquery

jQuery implémente la fonction de surveillance de défilement compatible avec IE6_jquery

小云云
小云云original
2018-02-05 10:40:081662parcourir

Cet article présente principalement jQuery pour implémenter la fonction de surveillance de défilement compatible avec IE6. Il analyse la surveillance des événements de jQuery, la réponse et la transformation dynamique des attributs de page pour différents navigateurs à travers des exemples. Les amis qui en ont besoin pourront s'y référer. Peut aider tout le monde.

En fait, cette chose était à l'origine destinée à être écrite en javascript natif, mais le javascript natif était trop compliqué pour obtenir la classe et surveiller le défilement de la barre de défilement, j'ai donc utilisé jQuery. est de toute façon compatible avec IE6.

obtiendra l'effet suivant :

qui est une surveillance de défilement courante dans les pages Web. Partout où vous faites défiler jusqu'au titre correspondant, la barre de défilement à gauche se trouve devant le titre actuel. . . Il devient 》》》, et bien sûr, le titre à gauche peut également être cliqué pour faire défiler immédiatement vers le bon endroit.

Le premier est la partie mise en page de la page Web. Le code est le suivant. Veuillez ignorer la grande quantité d'introduction JavaScript, juste pour occuper la grille et illustrer l'effet. 


<!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>
    <p>
      <p style="float:left;width:20%;">
        <p id="scrollspy" style="position:fixed;">
        <p id="debug"></p>
        </p>
      </p>
      <p id="content" style="float:left;width:80%">
        <p class="title">英文介绍</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 class="title">由来</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 class="title">区别</p>
        <p>不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然现在的程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。</p>
        <p class="title">标题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>
      </p>
    </p>
  </body>
</html>

L'idée de base est la suivante :

Ici,

(1 ) dans le chapitre Il y a un espace intentionnellement placé à la ligne 12 car nous ne voulons pas que le p soit dans 44b006eacf7fa5561967a317a579197b94b3e26ee717c64999d7867364b1b4a3 être vide et disparaître en largeur.

(2) Afin que IE6 prenne en charge l'attribut position:fixed, le ie6fixed.js suivant est introduit. L'origine de cette chose est inconnue. Créez un nouveau fichier js, copiez le code suivant et enregistrez-le. , et éditez la page Web. Ce script a été introduit afin que IE6 prenne en charge position:fixed. En même temps, pour le script qui souhaite implémenter position:fixed dans IE6, utilisez $("#p name"). .toFixed(); pour la compatibilité.

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 || &#39;fixed_&#39; + parseInt(Math.rand() * 10000);
        var rect = {
          w: t.width(),
          h: t.height(),
          l: t.css(&#39;left&#39;),
          r: t.css(&#39;right&#39;),
          &#39;t&#39;: t.css(&#39;top&#39;),
          b: t.css(&#39;bottom&#39;)
        };
        if (rect.l != &#39;auto&#39;) {
          rectl = parseInt(rect.l);
        }
        else {
          rectl = 0;
        }
        if (rect.r != &#39;auto&#39;) {
          rectr = parseInt(rect.r);
        }
        else {
          rectr = 0;
        }
        if (rect.t != &#39;auto&#39;) {
          rectt = parseInt(rect.t);
        }
        else {
          rectt = 0;
        }
        if (rect.b != &#39;auto&#39;) {
          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(&#39;style&#39;) + &#39;;&#39;;
        css += &#39;position:absolute;bottom:auto;right:auto;clear:both;&#39;;
        if (rect.l != &#39;auto&#39; && rect.r != &#39;auto&#39;)
          css += &#39;width:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.clientWidth - &#39; + rectl + &#39; - &#39; + rectr + &#39; : document.body.clientWidth - &#39; + rectl + &#39; - &#39; + rectr + &#39; );&#39;;
        if (rect.l == &#39;auto&#39; && rect.r != &#39;auto&#39;)
          css += &#39;left:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - &#39; + rectr + &#39;) : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - &#39; + rectr + &#39;));&#39;;
        else
          css += &#39;left:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollLeft + &#39; + rectl + &#39; : document.body.scrollLeft + &#39; + rectl + &#39;);&#39;;
        if (rect.t == &#39;auto&#39; && rect.b != &#39;auto&#39;)
          css += &#39;top:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - &#39; + rectb + &#39;) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - &#39; + rectb + &#39;));&#39;;
        else
          css += &#39;top:expression(eval(document.compatMode && document.compatMode==\&#39;CSS1Compat\&#39;) ? documentElement.scrollTop + &#39; + rectt + &#39; : document.body.scrollTop + &#39; + rectt + &#39;);&#39;;
        t.attr(&#39;style&#39;, css);
      });
    }
  });
})(jQuery);

Ensuite, le script de base suivant est la clé de la mise en œuvre de cette page : 


<script type="text/javascript">
  $("#scrollspy").toFixed();//让scrollspy这个p在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=&#39;#title"+title_counter+"&#39;>。。。"+$(this).html()+"</a></p>");
    //这里使用到<p>与<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>

Recommandations associées :

Explication détaillée de l'implémentation JavaScript de l'instance de fonction d'écoute de liaison du gestionnaire d'événements

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser correctement les highcharts en angulaireArticle suivant：Comment utiliser correctement les highcharts en angulaire

Articles Liés

Voir plus