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

2019-11-21 01:06:42

字體：大中小

供稿：網(wǎng)友

<!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>滾動(dòng)板</title> <style type="text/css"> /* 初始化 */ body { font: 12px/1 "宋體", SimSun, serif; background:#fff; color:#000; } /*核心是 position:relative;，才能讓其內(nèi)部的 ul 以絕對(duì)定位，通過改變 top 值實(shí)現(xiàn)向上移位置。*/ .scrollUl { overflow:hidden; position:relative; } /*演示多個(gè)滾動(dòng)板同時(shí)使用，這里是統(tǒng)一按每行按 20px 高，第一個(gè)每屏 4 行，第 2 個(gè)每屏 6 行。其實(shí)每組中行高也可不同。滾動(dòng)速度與具體行高無關(guān)。*/ #scrollUlTest1 {height:80px;} #scrollUlTest2 {height:120px;} /* 清除瀏覽器默認(rèn)的margin和padding值 */ .scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; /* 清除瀏覽器中列表項(xiàng)默認(rèn)的占位 */ } .scrollUl ul { position:absolute; } .scrollUl li { height:20px; } </style> <script type="text/javascript" language="javascript">  </script> </head> <body> <h1>通用滾動(dòng)板演示</h1> <h4>第1組</h4> <div   id="iwvjtn8m0"   class="scrollUl" id="scrollUlTest1"> <ul> <li>第 1 條內(nèi)容</li> <li>第 2 條內(nèi)容</li> <li>第 3 條內(nèi)容</li> <li>第 4 條內(nèi)容</li> <li>第 5 條內(nèi)容</li> <li>第 6 條內(nèi)容</li> <li>第 7 條內(nèi)容</li> <li>第 8 條內(nèi)容</li> <li>第 9 條內(nèi)容</li> <li>第 10 條內(nèi)容</li> <li>第 11 條內(nèi)容</li> <li>第 12 條內(nèi)容</li> <li>第 13 條內(nèi)容</li> <li>第 14 條內(nèi)容</li> <li>第 15 條內(nèi)容</li> <li>第 16 條內(nèi)容</li> <li>第 17 條內(nèi)容</li> <li>第 18 條內(nèi)容</li> <li>第 19 條內(nèi)容</li> <li>第 20 條內(nèi)容</li> </ul> </div>  <h4>第2組</h4> <div   id="iwvjtn8m0"   class="scrollUl" id="scrollUlTest2"> <ul> <li>第 1 條內(nèi)容</li> <li>第 2 條內(nèi)容</li> <li>第 3 條內(nèi)容</li> <li>第 4 條內(nèi)容</li> <li>第 5 條內(nèi)容</li> <li>第 6 條內(nèi)容</li> <li>第 7 條內(nèi)容</li> <li>第 8 條內(nèi)容</li> <li>第 9 條內(nèi)容</li> <li>第 10 條內(nèi)容</li> <li>第 11 條內(nèi)容</li> <li>第 12 條內(nèi)容</li> <li>第 13 條內(nèi)容</li> <li>第 14 條內(nèi)容</li> <li>第 15 條內(nèi)容</li> <li>第 16 條內(nèi)容</li> <li>第 17 條內(nèi)容</li> <li>第 18 條內(nèi)容</li> </ul> </div> </body> </html>

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

上一篇：jQuery animate效果演示

下一篇：簽名框（Textarea）限制文字?jǐn)?shù)量并適時(shí)提示