ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery_jqueryでのoffset()メソッドの使用例

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

WBOY
リリース: 2016-05-16 16:20:00
オリジナル
1172 人が閲覧しました

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

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

文法構造 1:

コードをコピー コードは次のとおりです:
$(selector).offset()

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

コード例:

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



<頭>


offset() 関数 - スクリプト ホーム


<スクリプトタイプ="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 属性的对象。

实例代码:

复制代 代码如下:



<頭>


offset()関数数- 脚本之家


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




 





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

语法结构三:

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


复制代码代码如下:
$(selector).offset(function(index,oldoffset))

パラメータ数列表:

实例代码:

复制代 代码如下:



<頭>


offset()関数数- 脚本之家


<スクリプトタイプ="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 プログラムの設計が役立つことを望みます。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート