Este artigo descreve o método do JS para rolar o texto para baixo. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype>
<html>
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JD.com e Taobao Listing </ititle>
<estilo>
@Charset "UTF-8";
/*
@Name: base
@Função: redefinir o estilo padrão do navegador
*/
/* Evite o impacto da cor de fundo definida pelo usuário nas páginas da web, adicione para permitir que os usuários personalizem fontes*/
html {
Cor:#000; fundo: #fff;
-Webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* As margens interna e externa geralmente fazem as posições de desempenho de cada estilo do navegador de maneira diferente*/
corpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, código, formulário, fieldset, legenda, entrada, textarea, p, blockquote, th, td, hr, botão, arti
CLE, de lado, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, menu, navegação, seção {
margem: 0; preenchimento: 0;
Cor:#333;
}
/ * Redefinir tags html5, ou seja, precisa criar (tag) em js */
Artigo, além, detalhes, figcaption, figura, rodapé, cabeçalho, hgroup, menu, navegação, seção {
exibição: bloco;
}
/* Os arquivos de mídia html5 são consistentes com img*/
áudio, tela, vídeo {
Exibição: Block Inline;*Display: Inline;*Zoom: 1;
}
/* Observe que os elementos do formulário não herdam a fonte pai*/
corpo, botão, entrada, selecione, textarea {
Fonte: 12px/1.5 Tahoma, Arial, // 5b8b // 4f53;
}
entrada, selecione, textarea {
tamanho de fonte: 100%;
}
/* Remova as margens de cada célula da tabela e faça com que suas bordas se sobreponham*/
mesa{
colapso da fronteira: colapso; espaçamento de borda: 0;
}
/* IE Bug corrigido: Th That não herda o alinhamento de texto*/
th {
Alinhamento de texto: herdar;
}
/* Remova a borda padrão*/
Fieldset, img {
borda: 0;
}
/* ie6 7 8 (q) O bug é exibido como desempenho em linha*/
iframe {
exibição: bloco;
}
/* Remova a borda deste elemento sob o Firefox*/
abbr, sigla {
borda: 0; font-variante: normal;
}
/* Estilo consistente del Style*/
del {
Decoração de texto: linha de linha;
}
endereço, legenda, citar, código, dfn, em, th, var {
estilo de fonte: normal;
Peso da fonte: 500;
}
/ * Remova o logotipo antes da lista, Li herdará */
Ol, ul {
estilo de lista: nenhum;
}
/* Alinhamento é o fator mais importante na tipografia, não centralize tudo*/
Legenda, th {
Alinhamento de texto: esquerda;
}
/* Do Yahoo, faça os títulos personalizados, adapte -se a vários aplicativos de sistema*/
H1, H2, H3, H4, H5, H6 {
tamanho de fonte: 100%;
Peso da fonte: 500;
}
P: Antes, Q: After {
contente:'';
}
/* SUPERSCRIPT e SUNFRIPTUROS UNIFICADOS*/
sub, sup {
tamanho de fonte: 75%; altura da linha: 0; Posição: relativa; Alinhamento vertical: linha de base;
}
sup {top: -0.5em;}
sub {Bottom: -0.25em;}
um{
Cor: #333;
}
/* Deixe a exibição do link sublinhe no estado de Hover*/
A: Hover {
Decoração de texto: sublinhado;
Cor: #C00;
}
/* Nenhum sublinhado é exibido por padrão, mantendo a página concisa*/
Ins, um {
Decoração de texto: Nenhum;
}
/* Limpe a flutuação*/
.FN-CLEAR: Depois de {
Visibilidade: escondida;
exibição: bloco;
tamanho de fonte: 0;
contente:" ";
claro: ambos;
altura: 0;
}
.fn-cl-Clear {
zoom: 1; / * para ie6 ie7 */
}
/* Ocultar, geralmente usado para cooperar com JS*/
corpo .fn-hide {
Exibir: Nenhum;
}
/ * Defina em linha para reduzir os erros causados por flutuação */
.fn-left, .fn-right {
exibição: embutido;
}
.fn-left {
flutuar: esquerda;
}
.fn-right {
Float: Certo;
}
#club {width: 888px; altura: 190px; margem: 40px Auto; borda: 1px sólido #dddddd; radio de borda: 5px 5px 0px 0px;}
#club .modle {width: 443px; altura: 190px; borda-direita: 1px sólido #dddddd; float: esquerda;}
#club .modle_right {border-right: nenhum; float: certo;}
#club .modle .modle_title {width: 443px; altura: 29px; altura da linha: 29px; tamanho da fonte: 12px; font-woight: Bold; Background:#f3f3f3;}
#club .modle .modle_title span {preenchimento-left: 7px;}
#club .modle .modle_con {width: 423px; margem: 0 Auto; altura: 160px; estouro: hidden;}
#club .modle .modle_con ul li {borda-bottom: 1px #ddd pontilhado; posição: relativa;}
#club .modle .modle_con .modle_img {width: 50px; altura: 79px; text-align: Center;}
#club .modle .modle_con .modle_img img {margin-top: 14px;}
#club .modle .modle_con .modle_img i {display: block; largura: 15px; altura: 17px; background: url (../ imagem/compra.png) no-repetição; posição: absoluto; topo: 10px; esquerda: 60px;}
#club .modle .modle_con .modle_text {width: 337px; altura: 60px; transbordamento: oculto; margin-top: 15px; preenchimento: 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> <pan> Lista popular </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<H2> <pan> Lista popular </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> uma chaleira elétrica muito boa </a> </p>
<div> <a href = ""> velocidade muito rápida. O sinal é bom e fácil de configurar. O mais importante é ver quanto tráfego é usado </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-Club End->
<script type = "text/javascript" src = "jQuery-1.4.js"> </script>
<Cript>
$ (function () {
função scolldown (id, tempo) {
var liHeight = $ ("#"+id+"ul li"). Height ();
var time = time || 2500;
setInterval (function () {
$ ("#"+id+"ul"). precend ($ ("#"+id+"ul li: último"). css ("altura", "0px"). Animate ({
Altura: LiHeight+"px"
},"lento"));
},tempo);
}
scolldown ("modle_left");
scolldown ("modle_right", 3000);
});
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.