JavaScript CSS 通用循環(huán)滾動條

更新時間：2009年10月02日 01:44:01 作者：

核心是 position:relative;，才能讓其內部的 ul 以絕對定位，通過改變 top 值實現向上移位置。

<!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; } /*演示多個滾動板同時使用，這里是統(tǒng)一按每行按 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> <div   id="vvxyksv9kd"   class="scrollUl" id="scrollUlTest1"> <ul> <li>第 1 條內容</li> <li>第 2 條內容</li> <li>第 3 條內容</li> <li>第 4 條內容</li> <li>第 5 條內容</li> <li>第 6 條內容</li> <li>第 7 條內容</li> <li>第 8 條內容</li> <li>第 9 條內容</li> <li>第 10 條內容</li> <li>第 11 條內容</li> <li>第 12 條內容</li> <li>第 13 條內容</li> <li>第 14 條內容</li> <li>第 15 條內容</li> <li>第 16 條內容</li> <li>第 17 條內容</li> <li>第 18 條內容</li> <li>第 19 條內容</li> <li>第 20 條內容</li> </ul> </div>  <h4>第2組</h4> <div   id="vvxyksv9kd"   class="scrollUl" id="scrollUlTest2"> <ul> <li>第 1 條內容</li> <li>第 2 條內容</li> <li>第 3 條內容</li> <li>第 4 條內容</li> <li>第 5 條內容</li> <li>第 6 條內容</li> <li>第 7 條內容</li> <li>第 8 條內容</li> <li>第 9 條內容</li> <li>第 10 條內容</li> <li>第 11 條內容</li> <li>第 12 條內容</li> <li>第 13 條內容</li> <li>第 14 條內容</li> <li>第 15 條內容</li> <li>第 16 條內容</li> <li>第 17 條內容</li> <li>第 18 條內容</li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: