Artikel ini menjelaskan metode JS untuk menggulir teks ke bawah. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> jd.com dan listing taobao </iteme>
<tyle>
@charset "UTF-8";
/*
@Name: Base
@Function: Setel ulang gaya default browser
*/
/* Mencegah dampak warna latar belakang yang ditentukan pengguna pada halaman web, tambahkan untuk memungkinkan pengguna menyesuaikan font*/
html {
Warna:#000; latar belakang: #fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Margin dalam dan luar biasanya membuat posisi kinerja setiap gaya browser berbeda*/
Tubuh, Div, DL, DT, DD, UL, OL, Li, H1, H2, H3, H4, H5, H6, Pre, Code, Form, Fieldset, Legend, Input, Textarea, P, Blockquote, TH, TD, HR, Tombol, Arti
CLE, Segera, Detail, FigCaption, Gambar, Footer, Header, HGroup, Menu, Nav, Bagian {
Margin: 0; padding: 0;
Warna:#333;
}
/ * Reset tag html5, yaitu perlu createelement (tag) di js */
Artikel, samping, detail, figcaption, figur, footer, header, hgroup, menu, nav, bagian {
Tampilan: Blok;
}
/* File media html5 konsisten dengan img*/
audio, kanvas, video {
Tampilan: inline-block;*Tampilan: inline;*zoom: 1;
}
/* Perhatikan bahwa elemen bentuk tidak mewarisi font induk*/
tubuh, tombol, input, pilih, textarea {
Font: 12px/1.5 Tahoma, Arial, // 5b8b // 4f53;
}
input, pilih, textarea {
Ukuran font: 100%;
}
/* Lepaskan margin setiap sel tabel dan buat ujungnya tumpang tindih*/
meja{
Border-Collapse: runtuh; spasi perbatasan: 0;
}
/* Yaitu bug diperbaiki: th tidak mewarisi teks-align*/
th{
Teks-Align: warisan;
}
/* Lepaskan perbatasan default*/
Fieldset, img {
Perbatasan: 0;
}
/* IE6 7 8 (Q) Bug ditampilkan sebagai kinerja in-line*/
iframe {
Tampilan: Blok;
}
/* Lepaskan perbatasan elemen ini di bawah Firefox*/
ABBR, akronim {
Perbatasan: 0; Font-Variant: Normal;
}
/* Gaya del yang konsisten*/
Del {
Dekorasi Teks: Line-Through;
}
alamat, keterangan, mengutip, kode, dfn, em, th, var {
Font-style: Normal;
Font-Weight: 500;
}
/ * Hapus logo sebelum daftar, Li akan mewarisi */
ol, ul {
List-style: tidak ada;
}
/* Alignment adalah faktor terpenting dalam tipografi, jangan berpusat pada segalanya*/
Keterangan, th {
Teks-Align: Kiri;
}
/* Dari Yahoo, buat judulnya kustom, beradaptasi dengan beberapa aplikasi sistem*/
H1, H2, H3, H4, H5, H6 {
Ukuran font: 100%;
Font-Weight: 500;
}
T: Sebelumnya, T: Setelah {
isi:'';
}
/* Unified Superscript and Subscript*/
sub, sup {
Ukuran font: 75%; Line-Height: 0; Posisi: kerabat; Vertical-Align: Baseline;
}
sup {top: -0.5em;}
Sub {Bottom: -0.25em;}
A{
Warna: #333;
}
/* Biarkan tampilan tautan garis bawah di negara bagian hover*/
A: Hover {
Dekorasi Teks: Garis Besar;
Warna: #C00;
}
/* Tidak ada garis bawah ditampilkan secara default, menjaga halaman tetap rumit*/
INS, A {
Dekorasi Teks: Tidak Ada;
}
/* Clean Up Float*/
.fn-Clear: After {
Visibilitas: Tersembunyi;
Tampilan: Blok;
Ukuran font: 0;
isi:" ";
jelas: keduanya;
Tinggi: 0;
}
.fn-clear {
Zoom: 1; / * untuk IE6 IE7 */
}
/* Sembunyikan, biasanya digunakan untuk bekerja sama dengan JS*/
tubuh .fn-hide {
Tampilan: Tidak Ada;
}
/ * Set inline untuk mengurangi bug yang disebabkan oleh mengambang */
.fn-left, .fn-right {
Tampilan: inline;
}
.fn-left {
float: kiri;
}
.fn-right {
float: benar;
}
#club {width: 888px; tinggi: 190px; margin: 40px auto; perbatasan: 1px solid #ddddd; border-radius: 5px 5px 0px 0px;}
#club .modle {width: 443px; tinggi: 190px; batas-kanan: 1px solid #dddddd; float: left;}
#club .modle_right {border-right: none; float: right;}
#club .modle .modle_title {width: 443px; tinggi: 29px; line-height: 29px; font-size: 12px; font-weight: bold; latar belakang:#f3f3f3;}
#club .modle .modle_title span {padding-left: 7px;}
#club .modle .modle_con {width: 423px; margin: 0 auto; tinggi: 160px; overflow: tersembunyi;}
#club .modle .modle_con ul li {border-bottom: 1px #ddd dotted; position: relatif;}
#club .modle .modle_con .modle_img {width: 50px; tinggi: 79px; text-align: center;}
#club .modle .modle_con .modle_img img {margin-top: 14px;}
#club .modle .modle_con .modle_img i {display: block; lebar: 15px; tinggi: 17px; latar belakang: url (../ gambar/buy.png) no-repeat; posisi: absolute; atas: 10px; kiri: 60px;}
#club .modle .modle_con .modle_text {width: 337px; tinggi: 60px; overflow: tersembunyi; margin-top: 15px; padding-left: 8px;}
#club .modle .modle_con .modle_text pa {color:#005ea7;}
#club .modle .modle_con .modle_text div a {color:#999999;}
</tyle>
</head>
<body>
<Div id = "club">
<Div id = "modle_left">
<h2> <span> daftar populer </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "gambar/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
</ul>
</div>
</div>
<Div id = "modle_right">
<h2> <span> daftar populer </span> </h2>
<div>
<ul>
<li>
<div> <a href = "###"> <img src = "gambar/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho3.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho1.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
<li>
<div> <a href = "###"> <img src = "gambar/ho2.jpg"> </a> <i> </i> </div>
<div>
<p> <a href = "###"> Ketel listrik yang sangat bagus </a> </p>
<div> <a href = ""> kecepatan sangat cepat. Sinyalnya bagus dan mudah diatur. Yang paling penting adalah melihat berapa banyak lalu lintas yang digunakan </a> </div>
</div>
</li>
</ul>
</div>
</div>
</Div> <!-Club End->
<type skrip = "Text/JavaScript" src = "jQuery-1.4.js"> </script>
<script>
$ (function () {
function scolldown (id, time) {
var liHeight = $ ("#"+id+"ul li"). height ();
var time = waktu || 2500;
setInterval (function () {
$ ("#"+id+"ul"). prepend ($ ("#"+id+"ul li: last"). css ("height", "0px"). animate ({
Tinggi: LIHEIGHT+"PX"
},"lambat"));
},waktu);
}
scolldown ("modle_left");
scolldown ("modle_right", 3000);
});
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.