Dieser Artikel beschreibt die Methode von JS, um den Text nach unten zu scrollen. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType>
<html>
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> jd.com und taobao listing </title>
<Styles>
@CharSet "UTF-8";
/*
@Name: Basis
@Funktion: Setzen Sie den Browser -Standardstil zurück
*/
/* Verhindern Sie die Auswirkungen der benutzerdefinierten Hintergrundfarbe auf Webseiten, damit Benutzer Schriftarten anpassen können*/
html {
Farbe:#000; Hintergrund: #fff;
-Webkit-text-Größe-Anpassung: 100%;
-ms-textgröße-adjust: 100%;
}
/* Innere und äußere Ränder machen normalerweise die Leistungspositionen jedes Browserstils unterschiedlich*////////
Körper, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, Pre, Code, Form, Fieldset, Legende, Eingabe, TextArea, P, Blockquote, Th, TD, HR, Button, Arti
CLE, beiseite, Details, Figcaption, Figur, Fußzeile, Header, Hgroup, Menü, Navigation, Abschnitt {
Rand: 0; Polsterung: 0;
Farbe:#333;
}
/ * HTML5 -Tags zurücksetzen, dh er erstellen (Tag) in js */erstellen (Tag)
Artikel, beiseite, Details, Figcaption, Figur, Fußzeile, Header, Hgroup, Menü, NAV, Abschnitt {
Anzeige: Block;
}
/* HTML5 -Mediendateien stimmen mit IMG*/überein
Audio, Leinwand, Video {
Anzeige: Inline-Block;*Anzeige: Inline;*Zoom: 1;
}
/* Beachten Sie, dass Formelemente nicht übergeordnete Schriftart*/erben
Körper, Schaltfläche, Eingabe, Auswählen, textarea {
Schriftart: 12px/1,5 Tahoma, Arial, // 5b8b // 4f53;
}
eingeben, auswählen, textarea {
Schriftgröße: 100%;
}
/* Entfernen Sie die Ränder jeder Tabellenzelle und lassen Sie ihre Kanten überlappen*/
Tisch{
Grenzkollapse: Zusammenbruch; Grenzabteilung: 0;
}
/* Dh Fehler behoben: TH erbt nicht text-align*/
th {
Text-Align: Erbe;
}
/* Standardrand entfernen*//
Fieldset, img {
Grenze: 0;
}
/* IE6 7 8 (q) Fehler wird als Inline-Leistung*/angezeigt
iframe {
Anzeige: Block;
}
/* Entfernen Sie den Rand dieses Elements unter Firefox*/
ABBR, Akronym {
Grenze: 0; Schriftvariante: Normal;
}
/* Konsequentes del style*/
del {
Textdekoration: Zeilenum;
}
Adresse, Bildunterschrift, Cite, Code, DFN, EM, Th, var {
Schriftstil: normal;
Schriftgewicht: 500;
}
/ * Entfernen Sie das Logo vor der Liste, li erbt */
ol, ul {
Listenstil: Keine;
}
/* Ausrichtung ist der wichtigste Faktor in der Typografie. Zentrieren Sie nicht alles*/
Bildunterschrift, th {
Text-Align: links;
}
/* Von Yahoo machen Sie die Titel benutzerdefiniert, passen Sie sich an mehrere Systemanwendungen an*//////
H1, H2, H3, H4, H5, H6 {
Schriftgröße: 100%;
Schriftgewicht: 500;
}
F: Vor, F: Nach {{
Inhalt:'';
}
/* Unified Superscript und Index*//
sub, sup {
Schriftgröße: 75%; Zeilenhöhe: 0; Position: Relativ; vertikaler Align: Grundlinie;
}
sup {top: -0.5em;}
sub {boden: -0.25em;}
A{
Farbe: #333;
}
/* Lassen Sie den Link im Schwebestand unterstreichen*/
A: Hover {
Textdekoration: Unterstreichung;
Farbe: #C00;
}
/* Standardmäßig wird keine Unterstreichung angezeigt, wobei die Seite präzise*/hält*/
Ins, a {
Textdekoration: Keine;
}
/* Float up up up*/
.fn-clear: nach {
Sichtbarkeit: versteckt;
Anzeige: Block;
Schriftgröße: 0;
Inhalt:" ";
klar: beides;
Höhe: 0;
}
.fn-clear {
Zoom: 1; / * für IE6 IE7 *//
}
/* Verstecken, normalerweise verwendet, um mit JS*/zusammenzuarbeiten
Körper .fn-hide {
Anzeige: Keine;
}
/ * Inline einstellen, um Fehler zu reduzieren, die durch das Schwimmen verursacht werden */
.fn-links, .fn-right {
Anzeige: Inline;
}
.fn-links {
float: links;
}
.fn-right {
float: rechts;
}
#club {width: 888px; Höhe: 190px; Margin: 40px Auto; Rand: 1px Solid #ddddd; Border-Radius: 5px 5px 0px 0px;}
#club .modle {width: 443px; Höhe: 190px; Grenzrechte: 1px solide #dddddd; float: links;}
#club .modle_right {Border-Light: None; Float: Right;}
#club .modle .modle_title {width: 443px; Höhe: 29px; Linienhöhe: 29px; Schriftgröße: 12px; Schriftgewicht: BOLD; Hintergrund:#f3f3f3;}
#club .modle .modle_title span {padding-links: 7px;}
#club .modle .modle_con {width: 423px; Margin: 0 Auto; Höhe: 160px; Überlauf: versteckt;}
#club .modle .modle_con ul li {Border-Bottom: 1px #ddd gepunktet; Position: relativ;}
#club .modle .modle_con .modle_img {width: 50px; Höhe: 79px; text-align: center;}
#club .modle .modle_con .modle_img img {margin-top: 14px;}
#club .modle .modle_con .modle_img i {display: block; width: 15px; Höhe: 17px; Hintergrund: URL (../ Image/buy.png) no-repeat; Position: absolut; obere: 10px; links: 60px;}
#club .modle .modle_con .modle_text {width: 337px; Höhe: 60px; Überlauf: versteckt; Margin-Top: 15px; Padding-Links: 8px;}
#club .modle .modle_con .modle_text pa {color:#005ea7;}
#club .modle .modle_con .modle_text div a {color:#999999;}
</style>
</head>
<body>
<div id = "Club">
<div id = "modle_left">
<h2> <span> beliebte Liste </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "Image/HO1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img Src = "Image/HO2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "Image/HO1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img Src = "Image/HO2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<h2> <span> beliebte Liste </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "Image/HO1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img Src = "Image/HO2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "Image/HO1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img Src = "Image/HO2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ein sehr gutes elektrisches Wasserkocher </a> </p>
<div> <a href = ""> Geschwindigkeit sehr schnell. Das Signal ist gut und leicht eingerichtet. Das Wichtigste ist zu sehen, wie viel Verkehr verwendet wird </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-Clubende->
<script type = "text/javaScript" src = "jQuery-1.4.js"> </script>
<Script>
$ (function () {
Funktion scolldown (id, Zeit) {
var liHeight = $ ("#"+id+"ul li"). height ();
var time = Zeit || 2500;
setInterval (function () {
$ ("#"+id+"ul"). Prepend ($ ("#"+id+"ul li: last"). CSS ("Höhe", "0px"). Animate ({{{{{
Höhe: LiHeight+"PX"
},"langsam"));
},Zeit);
}
scolldown ("modle_left");
scolldown ("modle_right", 3000);
});
</script>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.