WebAPI-5日目

---

序文

学習目標：

一般的なオフセットシリーズのプロパティの役割を知ることができます

一般的なクライアントシリーズの属性の役割を知ることができます

一般的なスクロールシリーズのプロパティの役割を知ることができます

単純なアニメーション機能をカプセル化する機能

提示：以下是本篇文章正文内容，下面案例可供参考

1.エレメントオフセットオフセットシリーズ

1.1オフセットの概要

オフセットはオフセットに変換されます。オフセット系列の関連する属性を使用して、要素の位置（オフセット）、サイズなどを動的に取得できます。

1. 配置された親要素で要素の距離を取得します

2. 要素自体のサイズ（幅と高さ）を取得します

3. 注：戻り値には単位がありません
   

注：offset seriesプロパティの戻り値には単位がありません。使用する場合は、offsetWidthとoffsetHeightによって取得される要素のサイズである「px」（境界線、パディング、コンテンツを含む）を追加することを忘れないでください。

1.2オフセットとスタイルの違い

1.2.1オフセット

• offsetは、任意のスタイルシートのスタイル値を取得できます

• オフセットシリーズで得られる値には単位がありません

• offsetWidthには、パディング+ボーダー+幅が含まれます

• offsetWidthなどの属性は読み取り専用の属性であり、取得のみが可能で、割り当てることはできません。

• したがって、要素のサイズと位置を取得する必要があります。オフセットを使用する方が適切です。

1.2.2スタイル

• styleは、インラインスタイルシートのスタイル値のみを取得できます

• style.widthは、単位を含む文字列を取得します

• style.widthは、パディングと境界線なしで値を取得します

• style.widthは読み取りおよび書き込み可能なプロパティであり、取得または割り当てることができます

• したがって、要素の値を変更する場合は、スタイルで変更する必要があります

注：1。オフセット系列によって返される値には単位がないため、使用する場合は単位pxを追加する必要があります。2。オフセット系列は読み取り専用の属性であり、値を割り当てることはできません。割り当ての場合、 style属性を使用します。

1.3ケース：ボックス内のマウスの座標を取得します

1. ボックス内をクリックして、ボックスからマウスの左右の距離を取得します。
2. まず、ページ内のマウスの座標を取得します（e.pageX、e.pageY）
3. 次に、ページ内のボックスの距離を取得します（box.offsetLeft、box.offsetTop）
4. ページからのマウスの座標からページ内のボックスの距離を引くと、ボックス内のマウスの座標が取得されます。
5. マウスを動かしたい場合は、最新の座標を取得する必要があります。マウスを使用して移動します

コードは次のとおりです（例）：

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
    
    
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
	this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

第二に、要素視覚野クライアントシリーズ

2.1クライアントの概要

クライアントはクライアントとして翻訳されます。クライアントシリーズの関連プロパティを使用して、要素の表示領域に関する情報を取得します。
要素の境界線サイズ、要素サイズなどは、クライアントシリーズの関連するプロパティを介して動的に取得できます。

3.要素スクロールスクロールシリーズ

3.1スクロールの概要

スクロールはスクロールに変換されます。スクロールシリーズの関連するプロパティを使用して、要素のサイズとスクロール距離を動的に取得できます。

3.2ページのロール元のヘッダー

ブラウザの高さがページ全体を表示するのに十分な高さ（または幅）でない場合、スクロールバーが自動的に表示されます。スクロールバーが下にスクロールすると、ページの非表示の高さはページのスクロールヘッドと呼ばれます。onscrollイベントは、スクロールバーがスクロールされたときに発生します。

3.3ケース：模倣淘宝網固定右サイドバー

1. 元のサイドバーは絶対に配置されています
2. ページが特定の位置にスクロールすると、サイドバーが固定位置に変更されます
3. ページはスクロールし続け、トップに戻るが表示されます

3.4ケーススタディ：

1. ページスクロールであるため、ページスクロールイベントスクロールを使用する必要があります。したがって、イベントソースはドキュメントです。
2. 特定の位置へのスクロールは、スクロールされているページの上限値を判断することです。
3. スクロールされるページのヘッダー：window.pageYOffsetをスクロールすると、左側にwindow.pageXOffsetが表示されます。
4. 要素のスクロールヘッダーはelement.scrollTopであり、ページのスクロールヘッダーの場合はwindow.pageYOffsetであることに注意してください。
5. 実際、この値はボックスのoffsetTopから取得できます。この値以上の場合は、ボックスを固定して配置できます。

コードは次のとおりです（例）：

//1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
    
    
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
    
    
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
    
    
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
    
    
                goBack.style.display = 'block';
            } else {
    
    
                goBack.style.display = 'none';
            }

        })

3.5ロールオフされたページのヘッダー互換性ソリューション

ロールオフされるページのヘッダーには互換性の問題があるため、ロールオフされるヘッダーには通常、次の書き込み方法があることに注意してください。

1. DTDは、document.documentElement.scrollTopを使用して宣言されます
2. DTDは宣言されていません。document.body.scrollTopを使用してください
3. 新しいメソッドwindow.pageYOffsetおよびwindow.pageXOffset、IE9はサポートを開始しました

コードは次のとおりです（例）：

function getScroll() {
    
    
    return {
    
    
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left

4.3つのシリーズの要約

それらの主な使用法：

1.オフセットシリーズは、要素の位置を取得するためによく使用されますoffsetLeft offsetTop

2.clientは、要素サイズclientWidthclientHeightを取得するためによく使用されます

3.scrollは、スクロール距離を取得するためによく使用されますscrollTop scrollLeft

4.ページのスクロール距離はwindow.pageXOffsetによって取得されることに注意してください

5、mouseenterとmouseoverの違い

• mouseenterイベントは、マウスが要素上を移動したときに発生します
• マウスオーバーと同様に、それらの違いは
• mouseoverマウスは、それ自体のボックスを通過するときにトリガーされ、サブボックスを通過するときにもトリガーされます。mouseenterはそれ自身のボックスを通してのみ発砲します
• これは、mouseenterがバブルしないためです。
• mouseenterとmouseを使用してmouseleaveを離れる場合、バブルは発生しません
  。注：mouseenterとmouseleaveはバブルせず、独自のボックスを通過したときにのみトリガーされます。

6つのアニメーション機能のカプセル化

6.1アニメーションの実装の原則

基本原則：タイマーsetInterval（）を介してボックスの位置を常に移動します。

実装手順：

1. ボックスの現在の位置を取得します
2. ボックスに現在の位置に1移動距離を追加させます
3. タイマーでこの操作を繰り返します
4. タイマーを終了する条件を追加します
5. element.style.leftを使用するには、この要素を配置する必要があることに注意してください

6.2アニメーション機能は、要素ごとに異なるタイマーを記録します

複数の要素がこのアニメーション関数を使用する場合は、毎回varでタイマーを宣言します。要素ごとに異なるタイマーを使用できます（独自のタイマーのみを使用します）。

コア原則：JSの使用は動的言語であるため、現在のオブジェクトにプロパティを追加すると非常に便利です。

コードは次のとおりです（例）：

 function animate(obj, target) {
    
    
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
    
    
                if (obj.offsetLeft >= target) {
    
    
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }