欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能

 更新時(shí)間：2017年09月20日 11:21:03   作者：yongh701  
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能,結(jié)合實(shí)例形式分析了jQuery針對不同瀏覽器的事件監(jiān)聽、響應(yīng)及頁面屬性動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能。分享給大家供大家參考，具體如下：

其實(shí)這東西本打算用原生的javascript來寫，但是原生的javascript取class與監(jiān)聽滾動(dòng)條的滾動(dòng)過于麻煩，因此上了jQuery，沒關(guān)系，反正兼容IE6就行。

將實(shí)現(xiàn)如下的效果：

也就是在網(wǎng)頁中有點(diǎn)常見的滾動(dòng)監(jiān)聽。相應(yīng)的標(biāo)題，滾到哪里，則左邊的滾動(dòng)條當(dāng)前標(biāo)題前的。。。就變成》》》，，當(dāng)然了，左邊的標(biāo)題同樣是可以點(diǎn)擊，馬上滾到該滾的地方。

首先是網(wǎng)頁布局部分，代碼如下，請忽略大堆的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>滾動(dòng)監(jiān)聽</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 style="float:left;width:20%;">
        <div id="scrollspy" style="position:fixed;">
        <div id="debug"></div>
        </div>
      </div>
      <div 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，后來網(wǎng)景在與昇陽公司合作之后將其改名為JavaScript[7]。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像Java”[8]，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme[9]。JavaScript與Java名稱上的近似，是當(dāng)時(shí)網(wǎng)景為了營銷考慮與太陽微系統(tǒng)達(dá)成協(xié)議的結(jié)果。為了獲取技術(shù)優(yōu)勢，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語言。為了互用性，Ecma國際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）?，F(xiàn)在兩者都屬于ECMAScript的實(shí)現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。</p>
        <p class="title">區(qū)別</p>
        <p>不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務(wù)器的負(fù)擔(dān)，而與此同時(shí)也帶來另一個(gè)問題：安全性。而隨著服務(wù)器的強(qiáng)壯，雖然現(xiàn)在的程序員更喜歡運(yùn)行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺(tái)、容易上手等優(yōu)勢大行其道。同時(shí)，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動(dòng)及異步IO等特性，JavaScript逐漸被用來編寫服務(wù)器端程序。</p>
        <p class="title">標(biāo)題2</p>
        <p>Netscape在最初將其腳本語言命名為LiveScript，后來網(wǎng)景在與昇陽公司合作之后將其改名為JavaScript[7]。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像Java”[8]，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme[9]。JavaScript與Java名稱上的近似，是當(dāng)時(shí)網(wǎng)景為了營銷考慮與太陽微系統(tǒng)達(dá)成協(xié)議的結(jié)果。為了獲取技術(shù)優(yōu)勢，微軟推出了JScript來迎戰(zhàn)JavaScript的腳本語言。為了互用性，Ecma國際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）創(chuàng)建了ECMA-262標(biāo)準(zhǔn)（ECMAScript）?，F(xiàn)在兩者都屬于ECMAScript的實(shí)現(xiàn)。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。</p>
      </div>
    </div>
  </body>
</html>

基本思想如下：

這里，

（1）在第12行故意放一個(gè)空格，是因?yàn)椴灰?span style="color: #0000ff"><div style="float:left;width:20%;"></div>這個(gè)div空空是也，以致于沒有了寬度。

（2）為了使IE6支持position:fixed屬性，引入了如下的一個(gè)ie6fixed.js，這東西的出處已經(jīng)無從可考，新建一個(gè)js文件，拷貝下面的代碼保存，在編輯網(wǎng)頁的時(shí)候?yàn)榱耸笽E6支持position:fixed引入這段腳本，同時(shí)對要在IE6實(shí)現(xiàn)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);

隨后，以下的核心腳本才是本頁面實(shí)現(xiàn)的關(guān)鍵所在：

<script type="text/javascript">
  $("#scrollspy").toFixed();//讓scrollspy這個(gè)div在IE6同樣可以position:fixed;
  //開始先遍歷標(biāo)題，生產(chǎn)目錄
  var title_counter=0;
  $(".title").each(function(){
    title_counter++;
    //對于每一個(gè)class為title的標(biāo)題設(shè)置錨點(diǎn)，同時(shí)在#scrollspy同生產(chǎn)每一個(gè)錨點(diǎn)的鏈接
    $(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;屬性。不能不隨滾動(dòng)的移動(dòng)而移動(dòng)。
  });
  //之后是顯示滾動(dòng)條滾動(dòng)事件，滾動(dòng)條一旦滾動(dòng)都會(huì)觸發(fā)這個(gè)事件
  $(window).scroll(function() {
    var height_now=$(window).scrollTop();//取當(dāng)前滾動(dòng)條的高度位置
    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取出各個(gè)標(biāo)題的高度位置，看當(dāng)前滾動(dòng)條的高度位置邁過了多少個(gè)標(biāo)題
      }
      title_counter++;
    });
    $("#debug").html("當(dāng)前高度："+height_now+"px,標(biāo)題數(shù)："+title_counter+",當(dāng)前標(biāo)題為："+title_now);//這行只是為了輸出信息給大家看清楚，可以沒有
    if(title_now>title_counter-1){//主要是防止某些瀏覽器滾動(dòng)到最底部，無法定位到最后一個(gè)標(biāo)題的現(xiàn)象
      title_now=title_counter-1;
    }
    $("#scrollspy>p:eq("+title_now+")>a").html("》》》"+$(".title:eq("+title_now+")").html());//對當(dāng)前滾動(dòng)條的高度位置邁過的最后一個(gè)標(biāo)題前的。。。換成》》》
  });
</script>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論