jquery が div とウィンドウと親 dv_jquery の間の距離を取得する例-jsチュートリアル-php.cn

jquery が div とウィンドウと親 dv_jquery の間の距離を取得する例

WBOY

リリース： 2016-05-16 17:20:36

オリジナル

1338 人が閲覧しました

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:

コードをコピー

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

innerBox

 
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: 

コードをコピー

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

*{ マージン: 0px; パディング: 0px; } div{ マージン: 0px; } .a{ 幅: 960px; 高さ: 200px; ; マージントップ: 40ピクセル; 高さ: 300ピクセル; } .マージントップ: 10ピクセル; 高さ: 100ピクセル; 🎜> html:

コードをコピー

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

/div>

$(function(){ var_offsetTop = $(".innerBox").offset().top; //280px })