ホームページ >ウェブフロントエンド >jsチュートリアル >jquery が div とウィンドウと親 dv_jquery の間の距離を取得する例
jquery が div とウィンドウと親 dv_jquery の間の距離を取得する例
- WBOYオリジナル
- 2016-05-16 17:20:361349ブラウズ
jquery では、ウィンドウから div までの距離を取得するために jquery.offset().top/left が使用され、親 div からの距離を取得するために jquery.position().top/left が使用されます (絶対位置の div である必要があります)。
(1) まず jquery.offset().top / left
css を導入します:
コードをコピー コードは次のとおりです。 200px; }
.parentBox{ パディング: 30px; 幅: 960px; } .innerBox{ パディング: 20px; 100px; }
html:
html:
コードをコピー
js:
コピーcode
コードは次のとおりです。
$(function(){ var_offsetTop = $(".innerBox").offset().top; //280px }) 280px here= a.height/200pxparentBox.padding-top/30pxparentBox.margin-top/40px innerBox.margin-top/10px; //ここでparentBoxがposition:relative; innerBoxがposition:absoluteを設定した場合
//このとき、_offsetTopの値は290px = a.height/200pxparentBox.margin-top; /40px innerBox.margin-top/10px ineBox.top/40px; //絶対定義は親 div の左上隅の内側の境界線を基準座標としているためです。
//innerBox が境界線を設定する場合は、境界値を追加します
(2) jqury.position().top /left を使用して子 div と親 div の間の距離を取得します。子 div は絶対に配置する必要があります
css:
//innerBox が境界線を設定する場合は、境界値を追加します
(2) jqury.position().top /left を使用して子 div と親 div の間の距離を取得します。子 div は絶対に配置する必要があります
css:
コードをコピー
コードは次のとおりです:
*{ マージン: 0px; パディング: 0px; } div{ マージン: 0px; } .a{ 幅: 960px; 高さ: 200px; ; マージントップ: 40ピクセル; 高さ: 300ピクセル; } .マージントップ: 10ピクセル; 高さ: 100ピクセル; 🎜> html:
コードをコピー
コードは次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。