* Web API 5要素オフセットオフセット・要素視覚野クライアント・要素スクロールスクロール・アニメーション機能パッケージ

** 1.1。**要素オフセットオフセットシリーズ

1.1.1オフセットの概要

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

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

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

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

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

オフセット

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

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

• offsetWidthをパディング+ボーダー+幅

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

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

スタイル

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

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

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

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

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

通常、要素のタッチイベントを登録するため、targetTocuhesを覚えておく必要があります

1.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;
})

1.1.4ケース：モーダルボックスのドラッグアンドドロップ

ポップアップボックスは、モーダルボックスとも呼ばれます。

1.ポップアップレイヤーをクリックすると、モーダルボックスがポップアップし、灰色の半透明のオクルージョンレイヤーが表示されます。

2.閉じるボタンをクリックしてモーダルフレームを閉じ、同時に灰色の半透明のオクルージョンレイヤーを閉じます。

3.モーダルボックスの一番上の行にマウスを置きます。マウスを押したままモーダルボックスをドラッグして、ページ内を移動できます。

4.マウスを放すと、モーダルボックスのドラッグを停止して移動できます

1.1.5。ケーススタディ：

1. ポップアップレイヤーをクリックすると、モーダルボックスとオクルージョンレイヤーが表示されます。
2. 閉じるボタンをクリックすると、モーダルボックスとオクルージョンレイヤーが非表示になりますdisplay：none;
3. ページ内でのドラッグの原則：マウスを押して移動した後、マウスを離します
4. トリガーイベントは、マウスがmousedownを押し、マウスがmousemoveを動かし、マウスがmouseupを解放することです。
5. ドラッグプロセス：マウスの移動中に、最新の値が取得され、モーダルボックスの左右の値に割り当てられるため、モーダルボックスはマウスを追いかけることができます
6. マウスの押下によってトリガーされるイベントのソースは一番上の行です。つまり、IDはタイトルです。
7. マウスの座標からボックス内のマウスの座標を引いたものが、モーダルボックスの実際の位置です。
8. マウスが押されたときに、ボックス内のマウスの座標を取得します。
9. マウスが移動したら、モーダルボックスの座標をマウス座標からボックス座標を引いたものに設定します。移動イベントはプレスイベントに書き込まれることに注意してください。
10. マウスを離すとドラッグが停止します。つまり、マウス移動イベントをキャンセルできます。

 // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
    
    
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
    
    
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
    
    
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
    
    
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
    
    
                document.removeEventListener('mousemove', move);
            })
        })

1.1.6ケース：JD拡大鏡の模倣

1. ケース全体を3つの機能モジュールに分けることができます
2. 小さな画像ボックスの上にマウスを置くと、黄色のオクルージョンレイヤーと大きな画像ボックスが表示され、2つのボックスを非表示にする機能を残します
3. 黄色のオクルージョンレイヤーは、マウスの機能に従います。
4. 黄色のオクルージョンレイヤーを移動すると、全体像が移動機能に従います。

1.1.7。ケーススタディ：

1. 黄色のオクルージョンレイヤーは、マウスの機能に従います。
2. マウスの座標をオクルージョンレイヤーに与えることは不適切です。オクルージョンレイヤーの座標は親ボックスの影響を受けるためです。
3. 1つ目は、ボックス内のマウスの座標を取得することです。
4. 次に、値が左側と上部の値としてオクルージョンレイヤーに与えられます。
5. この時点ではマウス移動イベントが使用されていますが、小さな画像ボックス内でまだ移動しています。
6. シールド層の位置が間違っていることが判明し、ボックス自体の高さと幅の半分を差し引く必要がありました。
7. オクルージョンレイヤーは、小さな画像ボックスの範囲を超えることはできません。
8. ゼロ未満の場合は、座標を0に設定します
9. オクルージョンレイヤーの最大移動距離よりも大きい場合は、座標を最大移動距離に設定します。
10. オクルージョンレイヤーの最大移動距離：小さな画像ボックスの幅からオクルージョンレイヤーボックスの幅を引いたもの

window.addEventListener('load', function() {
    
    
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
    
    
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
    
    
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
    
    
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
    
    
            maskX = 0;
        } else if (maskX >= maskMax) {
    
    
            maskX = maskMax;
        }
        if (maskY <= 0) {
    
    
            maskY = 0;
        } else if (maskY >= maskMax) {
    
    
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

1.2。要素視覚野のクライアントシリーズ

1.2.1クライアントの概要

クライアントはクライアントとして翻訳されます。クライアントシリーズの関連する属性を使用して、要素の視覚野の関連情報を取得します。
要素のフレームサイズと要素サイズは、クライアントシリーズの関連する属性を介して動的に取得できます。

1.2.2。淘宝網flexible.jsソースコード分析

関数をすぐに実行する（function（）（））（）または（function（）（）（））

主な役割：独立したスコープを作成します。名前の競合を避ける

次の3つの状況では、ページが更新されたときにloadイベントがトリガーされます。

1.タグのハイパーリンク

2. F5または更新ボタン（強制更新）

3.進むボタンと戻るボタン

しかし、Firefoxには機能があり、「ラウンドトリップキャッシュ」があります。このキャッシュはページデータを保存するだけでなく、DOMとJavaScriptの状態も保存します。実際、ページ全体がメモリに保存されます。

そのため、現時点では戻るボタンでページを更新することはできません。

このとき、pageshowイベントを使用してトリガーできます。、このイベントは、ページがキャッシュからのものであるかどうかに関係なく、ページが表示されたときにトリガーされます。ページのリロードでは、loadイベントがトリガーされた後にpageshowがトリガーされます。これは、イベントオブジェクトに永続化されているため、キャッシュ内のページによってトリガーされたpageshowイベントであるかどうかを判断します。

注意这个事件给window添加。

1.3。エレメントスクロールスクロールシリーズ

1.3.1。スクロールの概要

スクロールの変換はスクロールを意味します。スクロールシリーズの関連属性を使用して、要素のサイズとスクロール距離を動的に取得できます。

1.3.2。スクロールされているページの先頭

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

1.3.3。ケース：模倣淘宝網が右側のサイドバーを修正

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

1.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';
            }

        })

1.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

14.3つの主要なシリーズの要約

それらの主な用途：

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

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

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

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

1.5.mouseenterとmouseoverの違い

• mouseenterイベントは、マウスが要素上を移動したときにトリガーされます
• マウスオーバーと同様に、それらの違いは
• マウスオーバーは、マウスがそれ自体のボックスを通過するとき、およびマウスが子ボックスを通過するときにトリガーされます。mouseenterは、それ自体のボックスによってのみトリガーされます
• これは、mouseenterがバブリングしないためです。
• マウスと一緒にmouseenterを使用して、mouseleaveを離れます。同じことがバブリングしません

1.6。アニメーション機能パッケージ

1.6.1。アニメーション実現原理

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

実装手順：

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

1.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);
        }