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
Einführung in den Swap-Speicher des Linux-Systems
Swap-Speicher ist heutzutage ein gängiger Aspekt ...
Detaillierte Erklärung der grep- und egrep-Befehle in Linux
Vertreter / egrep Syntax: grep [-cinvABC] 'wo...
Lösung für den MySQL-Fehler „Jede abgeleitete Tabelle muss einen eigenen Alias haben“
MySQL meldet einen Fehler beim Ausführen einer Ab...
Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals
Nach der VIP-Konfiguration wird beim Aktiv/Standb...
Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode
Sinnvolle Einstellung des MySQL sql_mode sql_mode...
Bereitstellungsdokument für die Sicherheitseinstellungen des Win2008-Servers (empfohlen)
Ich hatte schon vor Neujahr an dem Projekt gearbe...
Lösung für das Problem der adaptiven Höhe und Breite der CSS-Anzeigetabelle
Definition und Verwendung Die Anzeigeeigenschaft ...
Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)
Laden Sie zunächst das Installationspaket von der...
10 Möglichkeiten zum Anzeigen komprimierter Dateiinhalte in Linux (Zusammenfassung)
Wenn wir den Inhalt einer archivierten oder kompr...
Natives JS zum Erzielen eines nahtlosen Karusselleffekts
Native js realisiert den Karusselleffekt (nahtlos...
Detaillierte Erläuterung der Datenübertragung zwischen React-Elternkomponenten und -Kindkomponenten
Inhaltsverzeichnis 1. Die übergeordnete Komponent...
Detaillierte Schritte zum Konfigurieren der MySQL-Remoteverbindung unter Alibaba Cloud
Vorwort Wie wir alle wissen, unterstützt das auf ...
Detaillierte Erklärung der Lösung für das Problem der zu kleinen Ubuntu-Systemschnittstelle in vmware14Pro
1. Betriebsumgebung vmware14pro Ubuntu 16.04LTS 2...
Einige Parameterbeschreibungen von Texteingabefeldern im Webdesign
<br />In Gästebüchern, Foren und anderen Ort...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...