Cet article décrit la méthode de JS pour faire défiler le texte vers le bas. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! Doctype>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JD.com et Taobao Listing </Title>
<style>
@Charset "UTF-8";
/ *
@name: base
@Function: réinitialisez le style par défaut du navigateur
* /
/ * Empêcher l'impact de la couleur d'arrière-plan définie par l'utilisateur sur les pages Web, ajouter pour permettre aux utilisateurs de personnaliser les polices * /
html {
Couleur: # 000; arrière-plan: #FFF;
-webkit-text-size-ajustement: 100%;
-ms-text-size-ajustement: 100%;
}
/ * Les marges intérieures et extérieures font généralement différemment les positions de performance de chaque style de navigateur * /
Body, Div, Dl, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, pré, code, forme, champ, légende, entrée, TextArea, P, Blockquote, Th, TD, HR, Button, Arti
CLE, mis à part, les détails, figure, figure, pied de page, en-tête, hgroup, menu, navigation, section {
marge: 0; rembourrage: 0;
Couleur: # 333;
}
/ * Réinitialiser les balises html5, c'est-à-dire que les besoins en création (tag) dans js * /
Article, à part les détails, Figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section {
Affichage: bloc;
}
/ * Les fichiers multimédias html5 sont cohérents avec img * /
Audio, toile, vidéo {
Affichage: bloc en ligne; * Affichage: en ligne; * Zoom: 1;
}
/ * Notez que les éléments de forme n'héritent pas de la police parent * /
corps, bouton, entrée, sélection, textarea {
Police: 12px / 1,5 Tahoma, Arial, // 5B8B // 4F53;
}
Entrée, sélectionnez, TextArea {
taille de police: 100%;
}
/ * Retirez les marges de chaque cellule de table et faites le chevauchement de ses bords * /
tableau{
Border-Collapse: s'effondrer; Espacement des bordures: 0;
}
/ * Ie bug fixe: th n'hérite pas du texte-aligne * /
ème{
Texte-aligne: héritage;
}
/ * Supprimer la bordure par défaut * /
Fieldset, img {
bordure: 0;
}
/ * ie6 7 8 (q) bug est affiché sous forme de performances en ligne * /
iframe {
Affichage: bloc;
}
/ * Retirez la bordure de cet élément sous Firefox * /
ABBR, acronyme {
Border: 0; Font-Variant: Normal;
}
/ * Style del cohérent * /
del {
Décoration du texte: ligne;
}
adresse, légende, citer, code, dfn, em, th, var {
Style de police: normal;
Police-poids: 500;
}
/ * Supprimer le logo avant la liste, Li héritera * /
ol, ul {
Style de liste: aucun;
}
/ * L'alignement est le facteur le plus important de la typographie, ne pas tout centrer * /
Légende, th {
Texte-aligne: gauche;
}
/ * De Yahoo, rendre les titres personnalisés, s'adapter à plusieurs applications système * /
H1, H2, H3, H4, H5, H6 {
taille de police: 100%;
Police-poids: 500;
}
Q: Avant, Q: après {
contenu:'';
}
/ * Exposant unifié et indice * /
sub, sup {
taille de police: 75%; hauteur de ligne: 0; Position: relative; Adigne vertical: ligne de base;
}
sup {top: -0.5em;}
sub {en bas: -0,25em;}
un{
Couleur: # 333;
}
/ * Laissez l'affichage de lien souligner à l'état de survol * /
A: Hover {
Décoration du texte: soulignement;
Couleur: # C00;
}
/ * Aucun soulignement ne s'affiche par défaut, en gardant la page concise * /
ins, un {
Décoration du texte: aucune;
}
/ * Nettoyer le flotteur * /
.fn-Clear: After {
Visibilité: cachée;
Affichage: bloc;
taille de police: 0;
contenu:" ";
Clear: les deux;
hauteur: 0;
}
.fn-Clear {
Zoom: 1; / * pour ie6 ie7 * /
}
/ * Masquer, généralement utilisé pour coopérer avec JS * /
corps .fn-hide {
Affichage: aucun;
}
/ * Définissez en ligne pour réduire les bogues causés par les flottants * /
.fn-left, .fn-droite {
Affichage: en ligne;
}
.fn-left {
flottant: à gauche;
}
.fn-droite {
flottant: à droite;
}
#club {width: 888px; hauteur: 190px; margin: 40px auto; border: 1px solide #dddddd; border-radius: 5px 5px 0px 0px;}
#club .modle {width: 443px; hauteur: 190px; border droite: 1px solide #dddddd; float: gauche;}
#club .modle_right {border-right: aucun; float: à droite;}
#club .modle .modle_title {width: 443px; hauteur: 29px; line-height: 29px; font-size: 12px; font-weight: bold; fond: # f3f3f3;}
#club .modle .modle_title span {padding-left: 7px;}
#club .modle .modle_con {largeur: 423px; marge: 0 auto; hauteur: 160px; débordement: caché;}
#club .modle .modle_con ul li {border-bottom: 1px #ddd pointillé; position: relative;}
#club .modle .modle_con .modle_img {width: 50px; hauteur: 79px; text-align: Center;}
#club .modle .modle_con .modle_img img {margin-top: 14px;}
#club .modle .modle_con .modle_img i {affichage: block; width: 15px; hauteur: 17px; fond: url (../ image / acheter.png) sans répétition; position: absolu; top: 10px; gauche: 60px;}
#club .modle .modle_con .modle_text {width: 337px; hauteur: 60px; overflow: Hidden; margin-top: 15px; padding-left: 8px;}
#club .modle .modle_con .modle_text pa {couleur: # 005ea7;}
#club .modle .modle_con .modle_text div a {couleur: # 999999;}
</ style>
</ head>
<body>
<div id = "club">
<div id = "modle_left">
<h2> <span> Liste populaire </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image / ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<h2> <span> Liste populaire </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image / ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image / ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Une très bonne bouilloire électrique </a> </p>
<div> <a href = ""> vitesse très rapidement. Le signal est bon et facile à configurer. La chose la plus importante est de voir combien de trafic est utilisé </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <! - Club End ->
<script type = "text / javascript" src = "jQuery-1.4.js"> </ script>
<cript>
$ (function () {
fonction scolldown (id, time) {
var liheight = $ ("#" + id + "ul li"). height ();
var time = heure || 2500;
setInterval (function () {
$ ("#" + id + "ul"). prend ($ ("#" + id + "ul li: dernier"). css ("height", "0px"). animate ({{
hauteur: liheight + "px"
},"lent"));
},temps);
}
scolldown ("modle_left");
scolldown ("modle_right", 3000);
});
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.