jquery要素の相対位置 code_jquery
/**
*jQuery rposition
*fix: 配置される要素
*rel: 相対位置決め要素
*options: {}、align: 左と右の配置、vlign: 垂直配置;値;xleft: 垂直方向の供給値; 調整: ウィンドウを基準にして自動的に調整するかどうか; rwindow: ウィンドウを基準にして配置します (align&vlign が中央の場合は垂直方向または水平方向の中央に配置されます)。*/
(function(win ,$){
win.rposition=function(fix,rel,options){
var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidth(),wh=$(ウィンドウ) .height(),ww=$(window).width(),
sT=$(document).scrollTop(),sL=$(document).scrollLeft(),
defaults={
align:"left"、
vlign:"top"、
xleft:0、
xtop:0、
adjust:true、
rwindow:false
}、
options = $.extend(defaults, options);
varectRel={
l:$(rel).offset().left,
t:$(rel).offset().top,
w:$(rel).outerWidth(),
h:$(rel).outerHeight()
};
switch(options.align){
case "left":
rectLeft=rectRel.l;break;
ケース "右":
rectLeft=rectRel.l rectRel.w;break;
ケース "センター":
rectLeft=rectRel.l .w/2;break;
ケース "rleft":
rectLeft=rectRel.l-rectW;
デフォルト:
rectLeft=rectRel.l; switch(options.vlign){
case "トップ":
rectTop=rectRel.t;break;
case "center":
rectTop=rectRel.t rectRel.h/2;break;
case "vbottom":
rectTop=rectRel.t-rectH;壊す;
ケース "ボトム":
デフォルト:
rectTop=rectRel.tectRel.h;
};
if(options.rwindow){
if(options.align=="center")rectLeft=(ww-rectW)/2 sL;
if(options.vlign=="center")rectTop=(wh-rectH)/2 sT;
};
if(options.adjust){
if(rectLeftrectW>ww sL){rectLeft-=(rectLeftrectW)-(wwsL)}
if(rectToprectH>whsT){rectTop=rectRel .t-rectH;}
};
$(fix).css({"left":rectLeft options.xleft,"top":rectTop options.xtop});
}
})(window,jQuery)

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









固定配置はドキュメント フローから切り離されますか? 特定のコード例が必要です。Web 開発では、レイアウトは非常に重要なトピックです。その中でも、ポジショニングはよく使われるレイアウト手法の 1 つです。 CSS には、静的配置、相対配置、および絶対配置という 3 つの一般的な配置方法があります。これら 3 つの位置決め方法に加えて、スティッキー位置決めという、より特殊な位置決め方法もあります。では、スティッキーな配置はドキュメント フローから切り離されるのでしょうか?以下で詳しく説明し、理解を助けるためにいくつかのコード例を示します。まず、ドキュメント フローとは何かを理解する必要があります

CSS の Bottom 属性の構文とコード例 CSS では、bottom 属性は要素とコンテナの下部の間の距離を指定するために使用されます。親要素の下部を基準とした要素の位置を制御します。ボトム属性の構文は次のとおりです: element{bottom:value;} ここで、element はスタイルが適用される要素を表し、value は設定されるボトム値を表します。 value にはピクセルなどの特定の長さの値を指定できます

CSS 変換: 要素の回転効果を実現する方法には、特定のコード サンプルが必要です。Web デザインでは、アニメーション効果はユーザー エクスペリエンスを向上させ、ユーザーの注意を引くための重要な方法の 1 つであり、回転アニメーションは最も古典的なものの 1 つです。 CSS では、「transform」属性を使用して、回転を含む要素のさまざまな変形効果を実現できます。この記事では、CSS「transform」を使用して要素の回転効果を実現する方法と、具体的なコード例を詳しく紹介します。 1.CSSの「transf」の使い方

CSS トランジション効果: 要素のスライド効果を実現する方法 はじめに: Web デザインでは、要素の動的な効果によりユーザー エクスペリエンスを向上させることができます。その中でも、スライド効果は一般的で人気のあるトランジション効果です。 CSS のトランジション プロパティを使用すると、要素のスライド アニメーション効果を簡単に実現できます。この記事では、CSS トランジション プロパティを使用して要素のスライド効果を実現する方法を紹介し、読者がよりよく理解して適用できるように具体的なコード例を示します。 1. CSS トランジション属性の概要 トランジション CSS トランジション属性 tra

CSS 要素の配置には、静的、相対、絶対、固定配置の 4 つの方法があります。静的配置がデフォルトであり、要素は配置ルールの影響を受けません。相対配置では、ドキュメント フローに影響を与えることなく、要素をそれ自体に対して相対的に移動します。絶対配置では、要素をドキュメント フローから削除し、その要素をその祖先要素に対して相対的に配置します。固定配置では、ビューポートを基準にして要素を配置し、要素を常に画面上の同じ位置に保ちます。

HTML5 でボックスを中央揃えにするには、次の方法があります: 水平方向の中央揃え: text-align: centermargin: autodisplay: flex; justify-content: center; 垂直方向の中央揃え:vertical-align: middletransform: translation(-50%, -50% ); 位置: 絶対; 上: 50%; 左: 50%; 変換: 変換(-50%, -50%);

2017 年に発表された「tentionIsAllYouNeed」論文以来、Transformer アーキテクチャは自然言語処理 (NLP) 分野の基礎となってきました。その設計は長年にわたってほとんど変わっておらず、2022 年にはロータリー ポジション エンコーディング (RoPE) の導入によりこの分野で大きな発展が見られました。回転位置埋め込みは、最先端の NLP 位置埋め込み技術です。最も一般的な大規模言語モデル (Llama、Llama2、PaLM、CodeGen など) はすでにこれを使用しています。この記事では、回転位置エンコーディングとは何か、また、回転位置エンコーディングが絶対位置エンコーディングと相対位置エンコーディングの利点をどのようにうまく組み合わせているのかについて詳しく説明します。 Ro を理解するための位置エンコーディングの必要性

HTML と CSS を使用して固定ナビゲーション メニューを含むレイアウトを実装する方法 最新の Web デザインでは、固定ナビゲーション メニューは一般的なレイアウトの 1 つです。ナビゲーション メニューを常にページの上部または横に配置できるため、ユーザーは Web コンテンツを便利に閲覧できます。この記事では、HTML と CSS を使用して固定ナビゲーション メニューのレイアウトを実装する方法を紹介し、具体的なコード例を示します。まず、Web ページのコンテンツとナビゲーション メニューを表示する HTML 構造を作成する必要があります。これが簡単な例です
