JavaScript CSS 通用循環滾動條

2024-05-06 14:13:46

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滾動板</title> <style type="text/css"> /* 初始化 */ body { font: 12px/1 "宋體", SimSun, serif; background:#fff; color:#000; } /*核心是 position:relative;，才能讓其內部的 ul 以絕對定位，通過改變 top 值實現向上移位置。*/ .scrollUl { overflow:hidden; position:relative; } /*演示多個滾動板同時使用，這里是統一按每行按 20px 高，第一個每屏 4 行，第 2 個每屏 6 行。其實每組中行高也可不同。滾動速度與具體行高無關。*/ #scrollUlTest1 {height:80px;} #scrollUlTest2 {height:120px;} /* 清除瀏覽器默認的margin和padding值 */ .scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; /* 清除瀏覽器中列表項默認的占位 */ } .scrollUl ul { position:absolute; } .scrollUl li { height:20px; } </style>  </head> <body> <h1>通用滾動板演示</h1> <h4>第1組</h4>   第 1 條內容 第 2 條內容 第 3 條內容 第 4 條內容 第 5 條內容 第 6 條內容 第 7 條內容 第 8 條內容 第 9 條內容 第 10 條內容 第 11 條內容 第 12 條內容 第 13 條內容 第 14 條內容 第 15 條內容 第 16 條內容 第 17 條內容 第 18 條內容 第 19 條內容 第 20 條內容    <h4>第2組</h4>   第 1 條內容 第 2 條內容 第 3 條內容 第 4 條內容 第 5 條內容 第 6 條內容 第 7 條內容 第 8 條內容 第 9 條內容 第 10 條內容 第 11 條內容 第 12 條內容 第 13 條內容 第 14 條內容 第 15 條內容 第 16 條內容 第 17 條內容 第 18 條內容   </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：使用JS判斷是否數字和小數點組合的數字的兩中方法比較(isNaN和

下一篇：javascript String split方法誤操作