day05 - ウェブのAPI

学習目標：

共通するのは、家族の財産の役割を言うことができるオフセット

一般的なクライアントは、家族の財産の役割を言うことができます

共通の属性は、スクロールシリーズの役割を言うことができます

シンプルなアニメーション機能をカプセル化することができます

1.1 要素がオフセットシリーズをオフセット

1.1.1オフセットの概要

オフセット翻訳が相殺され、動的要素（オフセット）の位置、大きさ、そして我々は、関連する属性のオフセットシリーズを使用してを得ることができます。

位置決め要素と位置は、親要素から取得されます
自身得られた素子のサイズ（幅、高さ）
注：返される値は単位ではなく、

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-gfc3I3Nj-1584424270970）（画像\ピクチャ1.png）]

[チェーンが失敗した外ピクチャー・ダンプは、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは画像を保存することが推奨され、直接ダウンアップロード（IMG-iNHVnr4x-1584424270970）（F：\のWeb APIを\のWeb APIは五日\ノート\画像\写真2。 PNG）]

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

オフセット

スタイルシート内の任意のスタイルの値にすることができオフセット
シリーズオフセット値は、単位を取得されていません
offsetWidth包含パディング+ボーダー+幅
他の属性が読み取り専用されている属性offsetWidth、割り当てを得ることができるだけでなく、
そこで、我々は、より適切なオフセットにより、素子寸法の位置を取得したいです

スタイル

スタイルは、スタイルシートにインラインスタイル値のみを取得します
単位で取得した文字列style.width
style.width得られた値は、パディングとボーダーが含まれていません
style.widthは、読み書きされるプロパティを取得することができる割り当てることもできます
だから、我々は要素の値を変更したい、あなたはスタイルで変更する必要があります

通常、我々はタッチイベントの要素に登録されているので、targetTocuhesを覚えておくことが重要です

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

私たちは、あなたが箱の周りにマウスから離れて取得したい、ボックスをクリックします。
まず、ページ上でマウスの座標を取得する（e.pageX、e.pageY）
第二にページ上のボックスから取得した（box.offsetLeft、box.offsetTop）
マウスでページボックスに距離を減算してボックスにマウスの座標を取得するためにページから座標
あなたがマウスを移動する場合、最新の座標を取得移動するために、マウスを使用する必要があります

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ケーススタディ：

ポップアップをクリックし、そしてブロッキング層フレームモードがディスプレイに表示されますブロックと、
[閉じる]ボタンをクリックして、層を隠されたシャッターフレームモードでは表示されません：なし。
ページ原理をドラッグ：マウスを上下に移動して、その後、マウスを放し
押して、トリガイベントは、マウスのマウスダウンで、マウスのMouseMoveのmouseupを移動するために、マウスを放し
ドラッグ＆ドロップのプロセス：マウスの移動、左と最新の値を取得するために、トップ値はモーダルボックスに割り当てられている、マウスとそうモーダルボックスが行きます
トップラインであるイベントトリガソースマウスダウンは、タイトルのIDです
ボックス内のマウスのマウス座標の座標を減算し、フレームモードが真の位置です。
マウスダウンは、我々はボックス内にマウスの座標を取得したいです。
イベント書き留めにボックス座標を減算することによって座標が移動事象内に記述されているマウス：マウスの動きは、フレームに設定されている座標モーダルましょう。
マウスボタンを放し、停止にドラッグし、それはマウスがリフトにイベントを移動することができますということです

 // 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ケース：模造Jingdongはルーペ

完全な物語は、次の3つの機能モジュールに分割することができます
マウスの小さな画像ボックスの上に、黄色のボックスの2つのボックスに隠された機能を残し、層を遮断すると大きな画像を表示
イエロー閉塞層は、マウス機能に従います。
移動機能、次の黄色のシールド層、大きな画像を、移動します。

1.1.7ケーススタディ：

イエロー閉塞層は、マウス機能に従います。
マウスは、不適切な遮蔽層に配位。親ボックスのシールド層の座標が勝つため。
最初のボックスにマウスの座標を得ることです。
値として左及び最上層にオクルージョン値後。
このとき、イベントを移動するために、マウスを使用していますが、まだ小さいピクチャボックスに移動。
私たちは、ブロッキング層の位置は、ボックス自体のマイナス半分の高さと幅を必要としないことがわかりました。
遮蔽層は、小画像ボックスの範囲を超えることができません。
ゼロ未満の場合は、セットには座標を置くために0
最大値以下で遮蔽レイヤの距離を移動した場合、最大移動距離に配位置きます
シールド層の最大移動距離：小画像ボックス幅マイナスボックスシールド層の幅

[（。PNG形式の画像ダンプはチェーンが失敗し、発信局は、直接アップロード（IMG-mutqrFXr-1584424270970）画像\ 1551881487（1））下の画像を保存することが推奨され、セキュリティチェーン機構を有していてもよいです]

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-N0EBwbxB-1584424270971）（画像\ 1551881563（1）]。JPG）

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クライアントの概要

クライアントは、クライアントに、我々は視覚的なエリアの関連情報要素を取得するために、関連のプロパティクライアントのシリーズを使用して変換します。クライアントによって
動的に境界要素、要素のサイズおよびその他の属性の関連シリーズのサイズを取得することができます。

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-P67u79lC-1584424270971）（画像\ピクチャ3.png）]

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、直接ダウンアップロードされた画像を保存することをお勧めします（IMG-A82Gl5C3-1584424270972）（画像\ピクチャ4.png）]

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

即時実行機能（関数（）{}）（）または（関数（）{}（））

主な機能は：別のスコープを作成します。名前の競合を避けます

次の3つの場合は、ページのloadイベントがトリガされ更新されます。

ハイパーリンク1.Aラベル

2.F5またはリフレッシュボタン（リフレッシュを強制）

3.前後のボタン

しかし、Firefoxで、機能があり、「往復キャッシュ」がある、これはだけでなく、キャッシュページのデータを保存するだけでなく、DOMとJavaScriptの状態を保存している。実際には、ページ全体をメモリに格納されます。

だから、今回の戻るボタンはページを更新しません。

この時点では、トリガーにpageshowのイベントを使用することができます。ページがキャッシュからかどうかにかかわらず、ページの、表示されたときに、このイベントがトリガされます。ページ、loadイベントのトリガ後pageshowのトリガをリロードし、イベントオブジェクトがトリガpageshowのイベントのキャッシュページを永続化されるかどうかに応じて判断されます

注意这个事件给window添加。

1.3。スクロール転動体シリーズ

1.3.1。スクロールの概要

スクロール翻訳は、我々は、動的要素の大きさ、転がり距離を取得し、スクロールに関連する一連のプロパティを使用して、展開しています。

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-UD149ahy-1584424270972）（画像\ピクチャ5.png）]

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-qEcPvqPF-1584424270973）（画像\ピクチャ6.png）]

1.3.2ページをヘッドに巻かれます

ブラウザが高い（またはワイド）であれば程度はページ全体を表示するのに十分ではない、スクロールバーが自動的に表示されます。ページを下にスクロールするにはスクロールバーが高さの上に離れて非表示にするとき、私たちは、ページが頭に巻いていると呼ばれます。スクロールバーのスクロールはonscrollイベントをトリガする一方。

1.3.3ケース：模倣淘宝網は、右のサイドバーに固定されました

もともとサイドバーは、絶対位置であります
特定の位置にページスクロールには、サイドバーが固定位置に変更する場合
ページには、ロールに続きトップに戻る表示されます。

1.3.4ケーススタディ：

それはページのスクロールであるため、ページのスクロールスクロールイベントを使用する必要があり、イベントはソース文書であります
スクロール位置に、ページの上限値は、体積であると判定されます。
ページは、頭に巻い：あなたが得ることができる場合window.pageYOffsetによって左window.pageXOffsetボリュームにあります
ページをヘッドに巻かれている場合要素が頭に巻かれていることに注意してくださいは、element.scrollTopあるwindow.pageYOffsetです
この値以上は、あなたが箱の固定位置を作ることができれば実際には、この値は、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ページは、ヘッドの互換性ソリューションに巻かれます

それは、通常、次の文言あるヘッドをロールすることですので、ページが頭に巻いていることに注意してください、互換性の問題があります。

宣言されたDTD、document.documentElement.scrollTopを使用
宣言されていないDTD、使用document.body.scrollTop
IE9はサポートに始まった新しい方法window.pageYOffsetとwindow.pageXOffset、

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

1.4。三シリーズの概要

[画像のチェーンは、失敗したダンプの外に、ソースステーションは、セキュリティチェーン機構を有していてもよい、それは直接ダウンアップロードした写真を保存することをお勧めします（IMG-5rmrOd6U-1584424270973）（画像\写真は7.png）]

彼らの主な用途：

1.offsetシリーズは、多くの場合、素子の位置offsetLeft offsetTopを得るために使用されます

多くの場合、要素サイズclientWidth clientHeightを取得するために使用2.client

多くの場合、転がり距離scrollTopスプライトscrollLeftを取得するために使用3.scroll

4.注window.pageXOffsetによって得られたページのスクロール距離

違い1.5。MouseEnterイベントとマウスオーバー

要素の上にマウスを移動するには、イベントのMouseEnterをトリガーするとき
同様にマウスオーバー、両者の差であります
サブボックスがトリガされた後、ボックス自体の上にマウスオーバーマウスは、トリガーされます。唯一、独自のトリガーボックスでのMouseEnter
その理由は、理由のMouseEnterないバブル
MouseEnterのmouseleaveとマウスの葉でもバブルではないでしょう

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

1.6.1。原則アニメーション

基本原則：絶えずたsetIntervalタイマボックスを移動することにより、（）の位置にします。

実装手順：

ボックスの現在位置を取得します。
現在の場所からの移動距離と結合されたボックスをしてみましょう
この操作は、タイマーを使用して繰り返されます
プラスタイマー終了条件
この位置決め要素のニーズが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);
        }

王チェン志

公開された86元の記事・ウォン称賛95 ・ビュー1688

プライベートの手紙の懸念