Heim Web-Frontend js-Tutorial jquery 元素相对定位代码_jquery

jquery 元素相对定位代码_jquery

May 16, 2016 pm 06:18 PM
元素 relative Positionierung

复制代码 代码如下:

/**
*jQuery rposition
*fix:要定位的元素
*rel:相对定位的元素
*options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中);
*/
(function(win,$){
win.rposition=function(fix,rel,options){
var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidth(),wh=$(window).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);
var rectRel={
l:$(rel).offset().left,
t:$(rel).offset().top,
w:$(rel).outerWidth(),
h:$(rel).outerHeight()
};
switch(options.align){
case "left":
rectLeft=rectRel.l;break;
case "right":
rectLeft=rectRel.l+rectRel.w;break;
case "center":
rectLeft=rectRel.l+rectRel.w/2;break;
case "rleft":
rectLeft=rectRel.l-rectW;break;
default:
rectLeft=rectRel.l;
};
switch(options.vlign){
case "top":
rectTop=rectRel.t;break;
case "center":
rectTop=rectRel.t+rectRel.h/2;break;
case "vbottom":
rectTop=rectRel.t-rectH; break;
case "bottom":
default:
rectTop=rectRel.t+rectRel.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(rectLeft+rectW>ww+sL){rectLeft-=(rectLeft+rectW)-(ww+sL)}
if(rectTop+rectH>wh+sT){rectTop=rectRel.t-rectH;}
};
$(fix).css({"left":rectLeft+options.xleft,"top":rectTop+options.xtop});
}
})(window,jQuery)
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Unterbricht die Sticky-Positionierung den Dokumentenfluss? Unterbricht die Sticky-Positionierung den Dokumentenfluss? Feb 20, 2024 pm 05:24 PM

Unterbricht die Sticky-Positionierung den Dokumentenfluss? In der Webentwicklung ist das Layout ein sehr wichtiges Thema. Unter diesen ist die Positionierung eine der am häufigsten verwendeten Layouttechniken. In CSS gibt es drei gängige Positionierungsmethoden: statische Positionierung, relative Positionierung und absolute Positionierung. Zusätzlich zu diesen drei Positionierungsmethoden gibt es noch eine speziellere Positionierungsmethode, nämlich die Sticky-Positionierung. Unterbricht die Sticky-Positionierung also den Dokumentenfluss? Lassen Sie uns dies im Folgenden ausführlich besprechen und einige Codebeispiele bereitstellen, um das Verständnis zu erleichtern. Zuerst müssen wir verstehen, was Dokumentenfluss ist

Bottom-Attributsyntax in CSS Bottom-Attributsyntax in CSS Feb 21, 2024 pm 03:30 PM

Syntax und Codebeispiele für das Bottom-Attribut in CSS In CSS wird das Bottom-Attribut verwendet, um den Abstand zwischen einem Element und dem Boden des Containers anzugeben. Es steuert die Position eines Elements relativ zum unteren Rand seines übergeordneten Elements. Die Syntax des unteren Attributs lautet wie folgt: element{bottom:value;} wobei element das Element darstellt, auf das der Stil angewendet werden soll, und value den festzulegenden unteren Wert darstellt. Der Wert kann ein bestimmter Längenwert sein, z. B. Pixel

CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen Nov 21, 2023 pm 06:36 PM

CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Nov 21, 2023 pm 01:16 PM

CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra

So positionieren Sie Elemente in CSS So positionieren Sie Elemente in CSS Apr 26, 2024 am 10:24 AM

Es gibt vier Methoden zur Positionierung von CSS-Elementen: statische, relative, absolute und feste Positionierung. Die statische Positionierung ist die Standardeinstellung und das Element wird von den Positionierungsregeln nicht beeinflusst. Durch die relative Positionierung wird ein Element relativ zu sich selbst verschoben, ohne den Dokumentfluss zu beeinträchtigen. Bei der absoluten Positionierung wird ein Element aus dem Dokumentfluss entfernt und relativ zu seinen Vorgängerelementen positioniert. Durch die feste Positionierung wird ein Element relativ zum Ansichtsfenster positioniert, sodass es immer an derselben Position auf dem Bildschirm bleibt.

So zentrieren Sie die Box in HTML5 So zentrieren Sie die Box in HTML5 Apr 05, 2024 pm 12:27 PM

Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flexy-content: center; ); Position: absolut; links: 50 %; transformieren (-50 %; -50 %);

Detaillierte Erläuterung der Rotationspositionskodierung RoPE, die häufig in großen Sprachmodellen verwendet wird: Warum ist sie besser als die absolute oder relative Positionskodierung? Detaillierte Erläuterung der Rotationspositionskodierung RoPE, die häufig in großen Sprachmodellen verwendet wird: Warum ist sie besser als die absolute oder relative Positionskodierung? Apr 01, 2024 pm 08:19 PM

Die Transformer-Architektur ist seit der Veröffentlichung des Artikels „AttentionIsAllYouNeed“ im Jahr 2017 ein Eckpfeiler im Bereich der Verarbeitung natürlicher Sprache (NLP). Sein Design ist seit Jahren weitgehend unverändert geblieben, wobei das Jahr 2022 mit der Einführung von Rotary Position Encoding (RoPE) eine große Entwicklung auf diesem Gebiet markiert. Das Einbetten gedrehter Positionen ist die hochmoderne NLP-Positionseinbettungstechnik. Die meisten gängigen großen Sprachmodelle (wie Llama, Llama2, PaLM und CodeGen) verwenden es bereits. In diesem Artikel werfen wir einen detaillierten Blick darauf, was Rotationspositionskodierungen sind und wie sie die Vorteile der absoluten und relativen Positionseinbettungen geschickt kombinieren. Die Notwendigkeit einer Positionskodierung, um Ro zu verstehen

So implementieren Sie ein Layout mit einem festen Navigationsmenü mithilfe von HTML und CSS So implementieren Sie ein Layout mit einem festen Navigationsmenü mithilfe von HTML und CSS Oct 26, 2023 am 11:02 AM

So implementieren Sie mithilfe von HTML und CSS ein Layout mit einem festen Navigationsmenü. Im modernen Webdesign gehören feste Navigationsmenüs zu den häufigsten Layouts. Dadurch kann das Navigationsmenü immer oben oder am Rand der Seite angezeigt werden, sodass Benutzer bequem durch Webinhalte navigieren können. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML und CSS ein Layout mit einem festen Navigationsmenü implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zunächst müssen Sie eine HTML-Struktur erstellen, um den Inhalt der Webseite und das Navigationsmenü darzustellen. Hier ist ein einfaches Beispiel

See all articles