JavaScriptとCSSの復習(3)_javascriptスキル

まず、ページ全体に対する相対的なカーソルの位置を取得する方法を見てみましょう。カーソル位置変数 x および y は、通常、マウス イベント (mousemove や Mousedown など) を通じて取得されます。現在のカーソルを取得するには、次の 2 つの一般的な関数が使用されます。ページ全体に対する相対的な位置。

コードをコピー コードは次のとおりです:

//カーソルの水平位置を取得します
function getX(e) {
//一般化されたイベント オブジェクト
e = e window.event
//最初に非 IE ブラウザの場所を確認し、次に IE の場所を確認します return e.pageX || e.clientX document.body.scrollLeft;
}

//カーソルの垂直位置を取得します
function getY(e) {
// event object
e = e window.event;
//まず IE 以外のブラウザの場所を確認し、次に IE
return e.clientY ドキュメントの場所を確認します。 body.scrollTop;
}

たとえば、FF では e.pageX はページ全体の X 座標 (スクロール バーのスクロール距離を含む) ですが、IE では e.clientXは、現在ユーザーの目の前に表示されているビューの X 座標を表します。完全な X 座標位置を取得するには、document.body.scrollLeft (水平スクロール バーの距離) を追加する必要があります。
次の概念はビューポートであり、ブラウザのスクロール バー内のすべてとみなすことができます。ビューポートに含まれるコンポーネントには、ビューポート ウィンドウ、ページ、スクロール バーなどもあります。
ページのサイズを取得します:

コードをコピーします コードは次のとおりです:

/ /ページの高さを返します (コンテンツを追加すると変更される可能性があります)

function pageHeight() {
return document.body.scrollHeight;
}
//ページの幅を返します
function pageWidth() {
return document.body.scrollWidht;


scrollHeight とscrollWidth (クリックして表示)、要素の潜在的な幅と高さを記述します。現在表示されているサイズだけでなく、詳細も確認できます。

次に、スクロール バーの位置、つまりビューポートを基準としたページの上部からの距離を取得する必要があります。

コードをコピー コードは次のとおりです。// の水平スクロール位置を決定する関数です。 browser

functionscrollX () {

//IE6/7 の厳密モードで使用されるショートカット
var de = document.documentElement;
//pageXOffset 属性がブラウザに存在する場合は、次を使用します。 it
return self.pageXOffset ||
//それ以外の場合は、ルート ノードの左スクロール オフセットを取得してみます
(de && de.scrollLeft) || 最後に、取得してみますbody 要素の左スクロール オフセット Amount
document.body.scrollLeft
}

//ブラウザの垂直スクロール位置を決定する関数
functionscrollY() { //厳密モードの IE6 /7 で使用されるショートカット
var de = document.documentElement;
//ブラウザに pageYOffset 属性が存在する場合は、それを使用します
return self.pageYOffset ||
//それ以外の場合は、ノードの上部スクロール オフセットを取得しようとします
(de && de.scrollTop) ||
//最後に、ボディ要素の上部スクロール オフセットを取得しようとします
document.body.scrollTop;
}


window オブジェクトのプロパティとして存在する、scrollTo メソッドを使用して移動する方法を見てみましょう。 2 つのパラメータ、つまり x オフセットと y オフセットを受け取ります。2 つの例

コードをコピーします

コードは次のとおりです。次のように://スクロールが必要な場合は、ブラウザの上部で次のようにすることができます。window.scrollTo(0,0)

//スクロールする必要がある場合指定された要素に対して、次のようにすることができます。

window.scrollTo(0, pageY(document .getElementById('content')));


pageY 関数に慣れていない場合は、それを確認して、それを使用してドキュメント全体の要素の位置を取得できます。もう一度指定して、自分で統合します

コードをコピーします

コードは次のとおりです: //要素の Y 位置を取得しますfunction pageY(elem) { //ルート要素にあるかどうかを確認します

return elem.offsetParent?

//前の要素を取得し続けることができる場合は、現在のオフセットを増やして上方向に再帰を続けます
elem.offsetTop pageY(elem.offsetParent):
// それ以外の場合は get現在のオフセット
elem.offsetTop;
}


次に、ビューポートのサイズを取得することで、コンテンツの量を把握できます。ユーザーは現在見ることができます。

コードをコピー

コードは次のとおりです:

//Get the height of the viewport
function windowHeight() {
//A shortcut, used in strict mode of IE6/7
var de = document.documentElement;
/ /If the innerHeight attribute exists in the browser, use it
return self.innerHeight ||
//Otherwise, try to get the root node height
(de && de.clientHeight) ||
//Finally , try to get the height of the body element
document.body.clientHeight;
}

//Get the width of the viewport
function windowWidth() {
//A shortcut, Used in strict mode of IE6/7
var de = document.documentElement;
//If the innerWidth attribute exists in the browser, use it
return self.innerWidth ||
//Otherwise, Try to get the width of the root node
(de && de.clientWidth) ||
//Finally, try to get the width of the body element
document.body.clientWidth;
}

Maybe you have some doubts about properties such as innerHeight, clientHeight, etc., then just click on it, it is explained very clearly in the Mozilla Developer center.

Finally, let’s talk about a more interesting effect, which is also very popular in web front-ends now - "drag and drop". The author did not give a specific implementation, but quoted a good js library, dom-drag .js, you can learn the source code of experts, and also introduces several popular js libraries, including jquery. Okay, this is the review of javascript and css. If you have any questions, please leave a message for discussion.