Este artículo describe el método de JS para desplazarse hacia abajo. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! Doctype>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> JD.com y Taobao Listado </title>
<estilo>
@CharSet "UTF-8";
/*
@name: base
@Function: restablezca el estilo predeterminado del navegador
*/
/* Evitar el impacto del color de fondo definido por el usuario en las páginas web, agregue para permitir a los usuarios personalizar las fuentes*/
html {
color:#000; fondo: #fff;
-Webkit-text-size-ajust: 100%;
-ms-text-size-ajust: 100%;
}
/* Los márgenes internos y externos generalmente hacen las posiciones de rendimiento de cada estilo de navegador de manera diferente*/
cuerpo, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, código, forma, campos, leyenda, entrada, textea, p, blockquote, th, td, hr, botón, arti, arti, arti, arti, arti, arti
CLE, aparte, detalles, Captación de fig, figura, pie de página, encabezado, hgroup, menú, navegación, sección {
margen: 0; relleno: 0;
Color:#333;
}
/ * Restablecer etiquetas HTML5, es decir, necesita CreateElement (etiqueta) en js */
Artículo, aparte, detalles, figption, figura, pie de página, encabezado, hgroup, menú, navegación, sección {
Pantalla: bloque;
}
/* Los archivos multimedia HTML5 son consistentes con IMG*/
audio, lienzo, video {
Display: Inline-Block;*Display: Inline;*Zoom: 1;
}
/* Tenga en cuenta que los elementos de formulario no heredan la fuente principal*/
cuerpo, botón, entrada, selección, TextAREA {
fuente: 12px/1.5 Tahoma, Arial, // 5b8b // 4f53;
}
Entrada, seleccionar, TextAREA {
tamaño de fuente: 100%;
}
/* Retire los márgenes de cada celda de la mesa y haga que sus bordes se superpongan*/
mesa{
Colapso de borde: colapso; espaciado fronterizo: 0;
}
/* Es decir, el error corregido: th no herede text-align*/
th {
text-align: heredar;
}
/* Eliminar el borde predeterminado*/
Fieldset, img {
borde: 0;
}
/* IE6 7 8 (Q) El error se muestra como rendimiento en línea*/
iframe {
Pantalla: bloque;
}
/* Retire el borde de este elemento bajo Firefox*/
Abbr, acrónimo {
Border: 0; Font-Variant: Normal;
}
/* Style de Del*/consistente*/
Del {
Decoración de texto: línea a través de;
}
dirección, subtítulos, citar, código, dfn, em, th, var {
estilo de fuente: normal;
Font-peso: 500;
}
/ * Eliminar el logotipo antes de la lista, Li heredará */
ol, ul {
Estilo de lista: Ninguno;
}
/* La alineación es el factor más importante en la tipografía, no se centre todo*/
Leyenda, th {
text-align: izquierda;
}
/* Desde Yahoo, haga que los títulos sean personalizados, se adapte a múltiples aplicaciones del sistema*/
H1, H2, H3, H4, H5, H6 {
tamaño de fuente: 100%;
Font-peso: 500;
}
P: Antes, P: después {
contenido:'';
}
/* Superscript unificado y subíndice*/
sub, sup {
tamaño de fuente: 75%; Línea de altura: 0; Posición: relativo; Align vertical: línea de base;
}
sup {top: -0.5em;}
sub {fondo: -0.25em;}
a{
Color: #333;
}
/* Deje que la visualización de enlace subraye en el estado de hover*/
A: Hover {
Decoración de texto: subrayado;
Color: #C00;
}
/* No se muestra un subrayado de forma predeterminada, manteniendo la página concisa*/
ins, a {
Decoración de texto: ninguna;
}
/* Limpiar el flotador*/
.fn-clara: después de {
Visibilidad: oculto;
Pantalla: bloque;
tamaño de fuente: 0;
contenido:" ";
claro: ambos;
Altura: 0;
}
.fn-clare {
Zoom: 1; / * para IE6 IE7 */
}
/* Ocultar, generalmente se usa para cooperar con JS*/
cuerpo .fn Hide {
Pantalla: ninguno;
}
/ * Establezca en línea para reducir los errores causados por flotación */
.fn-izquierda, .fn-right {
Pantalla: en línea;
}
.fn-izquierda {
flotante: izquierda;
}
.fn-right {
flotante: correcto;
}
#Club {ancho: 888px; altura: 190px; margen: 40px Auto; Border: 1px Solid #DDDDDD; Border-Radius: 5PX 5PX 0PX 0PX;}
#club .modle {ancho: 443px; altura: 190px; border-right: 1px solid #dddddd; float: izquierda;}
#club .modle_right {border-right: none; float: right;}
#club .modle .modle_title {ancho: 443px; altura: 29px; line-height: 29px; font-size: 12px; font-weight: bold; fondo:#f3f3f3;}
#club .modle .modle_title span {Padding-left: 7px;}
#club .modle .modle_con {ancho: 423px; margen: 0 auto; altura: 160px; desbordamiento: oculto;}
#club .modle .modle_con ul li {border-bottom: 1px #ddd puntos; posición: relativo;}
#club .modle .modle_con .modle_img {ancho: 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; ancho: 15px; altura: 17px; fondo: url (../ image/buy.png) No-repeat; posición: absoluto; superior: 10px; izquierda: 60px;}
#club .modle .modle_con .modle_text {ancho: 337px; altura: 60px; desbordamiento: oculto; margen-top: 15px; padding-left: 8px;}
#club .modle .modle_con .modle_text pa {color:#005ea7;}
#club .modle .modle_con .modle_text div a {color:#999999;}
</style>
</ablo>
<Body>
<div id = "club">
<div id = "modle_left">
<h2> <span> Lista popular </span> </h2>
<div>
<ul>
<li>
<Div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<Div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<Div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
</ul>
</div>
</div>
<div id = "modle_right">
<h2> <span> Lista popular </span> </h2>
<div>
<ul>
<li>
<Div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<Div> <a href = "###"> <img src = "image/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<Div> <a href = "###"> <img src = "image/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "image/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Una muy buena tetera eléctrica </a> </p>
<div> <a href = ""> Velocidad muy rápida. La señal es buena y fácil de configurar. Lo más importante es ver cuánto tráfico se usa </a> </div>
</div>
</li>
</ul>
</div>
</div>
</div> <!-Club End->
<script type = "text/javaScript" src = "jQuery-1.4.js"> </script>
<script>
$ (function () {
función scOlldown (id, tiempo) {
var liheight = $ ("#"+id+"ul li"). Height ();
VAR TIME = TIME || 2500;
setInterval (function () {
$ ("#"+id+"ul"). Prepend ($ ("#"+id+"ul li: último"). CSS ("altura", "0px"). Animate ({
Altura: liheight+"PX"
},"lento"));
},tiempo);
}
scOlldown ("modle_left");
scOlldown ("modle_right", 3000);
});
</script>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.