jQuery_jqueryでのoffset()メソッドの使用例

この記事の例では、jQuery での offset() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、ドキュメント オブジェクトに対する一致した要素のオフセットを返すか、設定します。

文法構造 1:

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

$(selector).offset()

現在のドキュメント内の一致する要素の相対オフセットを取得します。
返されたオブジェクトには、top と left という 2 つの整数プロパティが含まれます。
このメソッドは、表示されている要素に対してのみ機能します。

コード例:

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

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("ボタン").click(function(){
a=$(".children").offset();
alert("要素のオフセット座標は次のとおりです: " a.top "|" a.left "");
})
})

要素の座標を取得します

上記のコードは、ドキュメントを基準としたサブディビジョンのオフセットをポップアップ表示できます。

文法構造 2:

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

$(selector).offset(value)

ドキュメント オブジェクトを基準にして、一致する要素の座標を設定します。
offset() メソッドを使用すると、要素の位置をリセットできます。この要素の位置はドキュメント オブジェクトを基準としています。
オブジェクトの元の位置スタイル属性が静的である場合、再配置を実装するために相対に変更されます。

パラメータリスト:

参数	描述
value	规定以像素计的 top 和 left 坐标。 可能的值： 1.值对，比如 {top:200,left:10}。 2.带有top和left 属性的对象。

实例代码:

复制代 代码如下:

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
  $("ボタン").click(function(){
     $(".children").offset({上:100,左:100})
  })
})

 

点击設置オフセット量

上記のコードは、ドキュメントに対して div のオフセットを設定できます。

语法结构三:

関数の戻り値を使用してオフセット座標を設定します:

复制代码代码如下:

$(selector).offset(function(index,oldoffset))

パラメータ数列表:

实例代码:

复制代 代码如下:

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
  $("ボタン").click(function(){
    $(".children").offset(function(a,b){
      var newpoint= new Object();
      newpoint.top=b.top 50;
      newpoint.left=b.left 50;
      新しいポイントを返す;
    })
  })
})

 

点击設置オフセット量

上記のコードは、関数によって値が返されることなく、同様に要素のオフセットを設定できます。

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。