Die Verwendung von Ankerpunkten in HTML_PowerNode Java Academy
|
Lassen Sie uns nun mehrere Situationen zur Steuerung von Ankerpunkten zusammenfassen: 1. Auf derselben Seite <a name="add"></a><!-- Ankerpunkt definieren--> <a href="#add">Zum Hinzufügen springen</a> 2. Auf verschiedenen Seiten befindet sich der Anker in a.html, und der Link von einer anderen Seite springt zu diesem Anker <a href="a.html#add">Zu a.add springen</a> 3. Das Klicken auf einen Link löst ein JS-Ereignis aus und springt zum Ankerpunkt. Es gibt zwei Möglichkeiten, damit umzugehen: Der Erste: <a href="#add" onclick="add()">Löst die Add-Funktion aus und springt zum Add-Ankerpunkt</a> Zweiter Typ:
<div id="divNode"><!-- Inhalt --></div><!-- Angenommen, es gibt einen Knoten, zu dem gesprungen werden muss-->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">Realisieren Sie den Ankereffekt durch scrollIntoView</a>
Es gibt mehrere Möglichkeiten, die Ankerpositionierung in HTML festzulegen, und zwar mithilfe der ID-Positionierung, der Namenspositionierung und der JS-Positionierung. Diese Methoden sind nicht unbedingt die vollständigsten, daher können Sie nur auf die folgenden verweisen 1. Verwenden Sie die ID-Positionierung: <a href="#1F" name="1F">Ankerpunkt 1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br> </p> </div> Diese Positionierung kann gezielt auf jedes beliebige Label angewendet werden. 2. Nutzen Sie die Namenspositionierung: <a href="#5F">Ankerpunkt 5</a> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <a name="5F">1111111</href> Das Name-Attribut kann nur zum Auffinden des A-Tags verwendet werden, nicht jedoch zum Auffinden anderer Tags wie beispielsweise Div. 3. Verwenden Sie die JS-Positionierung
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>Beispiele: js Ankerpunkt glatte Positionierung
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<Kopf>
<style type="text/css" mce_bogus="1">
div.test {
Breite: 400px;
Rand: 5px automatisch;
Rand: 1px durchgezogen #ccc;
}
div.test stark {
Schriftgröße: 16px;
Hintergrund: #fff;
Rahmen unten: 1px durchgezogen #aaa;
Rand: 0;
Anzeige: Block;
Polsterung: 5px 0;
Textdekoration: Unterstreichen;
Farbe: #059B9A;
Cursor: Zeiger;
}
div.test p {
Höhe: 400px;
Hintergrund: #f1f1f1;
Rand: 0;
}
</Stil>
<Skripttyp="text/javascript">
Funktion intval(v){
v = parseInt(v);
gibt isNaN(v) zurück? 0: v;
} // Elementinformationen abrufen Funktion getPos(e){
var l = 0;
var t = 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
während (e.offsetParent) {
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
e = e.Parent-Offset;
}
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
zurückkehren {
x: l,
y: t,
w: w,
h: h,
wb: wb,
hb: hb
};
} // Eine Information abrufen Funktion getScroll(){
var t, l, b, h;
wenn (Dokument.Dokumentelement && Dokument.Dokumentelement.ScrollTop) {
t = Dokument.documentElement.scrollTop;
l = Dokument.Dokumentelement.ScrollLeft;
w = Dokument.Dokumentelement.Scrollbreite;
h = Dokument.Dokumentelement.Scrollhöhe;
}
anders
wenn (Dokument.Text) {
t = Dokument.Body.ScrollTop;
l = Dokument.Body.ScrollLeft;
w = Dokument.Textkörper.Scrollbreite;
h = Dokument.Textkörper.Scrollhöhe;
}
zurückkehren {
t: t,
ll,
w: w,
h:h
};
} //?Punkt (Anker)?Sanfter Sprung?
Funktion Scroller (el, Dauer) {
wenn (Typ von el != 'Objekt') {
el = document.getElementById(el);
}
wenn (!el)
zurückkehren;
var z = dies;
z.el = el;
zp = getPos(el);
zs = getScroll();
z.clear = Funktion(){
Fenster.ClearInterval(z.timer);
z.timer = null
};
zt = (neues Datum).getTime();
z.Schritt = Funktion(){
var t = (neues Datum).getTime();
var p = (t - zt) / Dauer;
wenn (t >= Dauer + zt) {
z.clear();
Fenster.setTimeout(Funktion(){
z.scroll(zpy, zpx)
}, 13);
}
anders {
st = ((-Math.cos(p * Math.PI) / 2) + 0,5) * (zpy - zst) + zst;
sl = ((-Math.cos(p * Math.PI) / 2) + 0,5) * (zpx - zsl) + zsl;
z.scroll(st, sl);
}
};
z.scroll = Funktion(t, l){
Fenster.scrollTo(l, t)
};
z.timer = Fenster.Intervall setzen(Funktion(){
z.Schritt();
}, 13);
}
</Skript>
</Kopf>
<Text>
<div Klasse="Test">
<a name="header_1" id="header_1"></a>
<strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_2" id="header_2"></a>
<strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_3" id="header_3"></a>
<strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_4" id="header_4"></a>
<strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_5" id="header_5"></a>
<strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_6" id="header_6"></a>
<strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong>
<p>
</p>
</div>
<div Klasse="Test">
<a name="header_7" id="header_7"></a>
<strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
<p>
</p>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler
>>: Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5.27 winx64
Artikel empfehlen
Detaillierte Erläuterung von CSS3 zum Erzielen eines reaktionsschnellen Akkordeoneffekts
Ich habe mir vor kurzem ein Video von einem Auslä...
HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels
Inhaltsverzeichnis Implementieren von HTML CSS hi...
Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL
Spezifische Methode: 1. Öffnen Sie die Eingabeauf...
Diskussion zur horizontalen und vertikalen Zentrierung von Elementen in HTML
Beim Entwerfen einer Seite müssen wir das DIV häu...
Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker
Inhaltsverzeichnis Tomcat mit Docker installieren...
Beispielcode zur Implementierung des sekundären Verknüpfungseffekts der Dropdown-Box in Vue
1. Ergebnisse erzielen 2. Vom Backend zurückgegeb...
So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird
1. Erstellen Sie ein neues Rabbitmq im Verzeichni...
Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten
In diesem Artikel gibt es keine Spitzfindigkeiten,...
Methode zur Realisierung der Internetverbindung durch VMware Virtual Machine Bridging
Nachdem Sie VMware installiert und eine neue virt...
SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank
Datenbank für Online-Einkaufszentren - Produktkat...
Aktivierungscode und KMS-Installationsschlüssel für Windows Server 2019 (Volume License Edition, GVLK)
Ich habe vor, die internen Dokumente des Unterneh...
Detaillierte Erklärung der Unterschiede und Verwendungen von Linux-System-Shutdown-Befehlen
Was sind die Shutdown-Befehle für Linux-Systeme? ...
vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen
In der neuesten Version von WIN10 hat Microsoft e...
MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank
Wiederherstellung der MySQL Bin-Protokolldaten: v...
Tutorial zum Herunterladen und Installieren der komprimierten Version von MySQL 8.0.16 unter dem Win10-System
Download von der offiziellen Website: https://www...