资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript CSS 通用循环滚动条
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20language%3D%22javascript%22%3E%20%0D%0A%3C!--%20%0D%0A%2F*%20%0D%0A%E9%80%9A%E7%94%A8%E6%BB%9A%E5%8A%A8%E6%9D%BF%20%0D%0A2009-9-9%2015%3A16%3A13%20%0D%0A%E4%BD%9C%E8%80%85%EF%BC%9A%E9%9B%AA%E5%B3%B0%20%0D%0A%E6%AC%A2%E8%BF%8E%E8%BD%AC%E8%BD%BD%E4%BD%BF%E7%94%A8%EF%BC%8C%E8%AF%B7%E5%8C%85%E5%90%AB%E6%AD%A4%E6%AE%B5%E5%AE%8C%E6%95%B4%E8%AF%B4%E6%98%8E%E3%80%82%20%0D%0A*%2F%20%0D%0A%0D%0A%2F%2F%E6%9C%80%E5%90%8E%E6%AF%8F%E5%B1%8F%E9%AB%98%E5%BA%A6%20heightView%20%E5%92%8C%E8%A6%81%E7%A7%BB%E5%8A%A8%E7%9A%84%20ul%20%E8%8A%82%E7%82%B9%E9%83%BD%E6%94%B9%E7%94%A8%E4%B8%8A%E7%BA%A7%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E5%8F%98%E9%87%8F%EF%BC%8C%E4%BB%8E%E8%80%8C%20scrollView%20%E5%87%BD%E6%95%B0%E4%B8%8D%E7%94%A8%E4%BC%A0%E5%8F%82%E6%95%B0%E4%BA%86%EF%BC%8C%E8%BF%99%E6%A0%B7%E5%9C%A8%20setTimeout%20%E6%97%B6%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%9B%B4%E7%AE%80%E4%BE%BF%E5%9C%B0%E7%94%A8%20setTimeout(scrollView%2C%20duration)%3B%E8%80%8C%E4%B8%8D%E5%86%8D%E7%94%A8%E5%A5%97%E5%B1%82%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%E4%BA%86%E3%80%82%20%0D%0A%2F**%20%0D%0AcontainerId%20%E6%BB%9A%E5%8A%A8%E6%9D%BF%E5%A4%96%E5%B1%82%E8%8A%82%E7%82%B9%E7%9A%84%20ID%20%0D%0AnumViews%20%E5%88%86%E5%87%A0%E5%B1%8F%E6%BB%9A%E5%8A%A8%EF%BC%8C%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E6%98%BE%E7%A4%BA%E7%9A%84%E6%80%BB%E8%A1%8C%E6%95%B0%E5%BA%94%E8%AF%A5%E6%98%AF%E5%88%86%E5%B1%8F%E6%95%B0%E7%9A%84%E6%95%B4%E5%80%8D%E6%95%B0%E3%80%82%20%0D%0AshowTime%20%E6%AF%8F%E5%B1%8F%E5%9B%BA%E5%AE%9A%E4%BD%8F%E6%97%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E6%97%B6%E9%97%B4%EF%BC%8C%E5%8D%95%E4%BD%8D%E6%AF%AB%E7%A7%92%20%0D%0AscrollTime%20%E6%AF%8F%E6%AC%A1%E6%BB%9A%E5%8A%A8%E4%B8%80%E5%B1%8F%E7%94%A8%E7%9A%84%E6%97%B6%E9%97%B4%EF%BC%8C%E5%8D%95%E4%BD%8D%E6%AF%AB%E7%A7%92%20%0D%0A*%2F%20%0D%0Avar%20ScrollUl%3Dfunction(containerId%2C%20numViews%2C%20showTime%2C%20scrollTime)%20%0D%0A%7B%20%0D%0A%2F%2F%E5%AE%9A%E6%97%B6%E5%99%A8%E5%8F%98%E9%87%8F%EF%BC%8C%E5%9B%A0%E4%B8%BA%E6%9C%89%E7%A7%BB%E5%88%B0%E5%B1%82%E4%B8%8A%E6%97%B6%E5%81%9C%E6%AD%A2%E6%BB%9A%E5%8A%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%EF%BC%8C%E8%80%8C%E9%82%A3%E6%97%B6%E5%8F%AF%E8%83%BD%E8%BF%98%E6%B2%A1%E5%BC%80%E5%A7%8B%E5%AE%9A%E6%97%B6%E5%99%A8%E5%91%A2%EF%BC%8C%E6%89%80%E4%BB%A5%E5%85%88%E6%8A%8A%E8%BF%99%E4%B8%AA%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E5%87%BA%E6%9D%A5%E3%80%82%20%0D%0Athis.timer%3Dnull%3B%20%0D%0Athis.numViews%20%3D%20numViews%3B%20%0D%0Athis.showTime%20%3D%20showTime%3B%20%0D%0Athis.scrollTime%20%3D%20scrollTime%3B%20%0D%0A%0D%0Athis.container%20%3D%20document.getElementById(containerId)%3B%20%0D%0Avar%20ulChild%20%3D%20this.container.getElementsByTagName('ul')%3B%20%0D%0A%2F%2F%E8%BF%99%E9%87%8C%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%20ul%20%E8%8A%82%E7%82%B9%EF%BC%8C%E5%8F%96%E5%BE%97%E5%AE%83%20%0D%0Avar%20ul%20%3D%20ulChild%5B0%5D%3B%20%0D%0A%2F%2Ful%20%E6%98%AF%E6%9C%AA%E4%BD%BF%E7%94%A8%20CSS%20%E6%98%8E%E7%A1%AE%E6%8C%87%E5%AE%9A%E9%AB%98%E5%BA%A6%E7%9A%84%EF%BC%8CIE%20%E4%B8%AD%E7%94%A8%20realstyle%20%E5%8F%96%E4%B8%8D%E5%88%B0%E9%AB%98%E5%BA%A6%EF%BC%8C%E5%8F%AA%E8%83%BD%E5%BE%97%E5%88%B0%20auto%EF%BC%8C%E8%80%8C%20getBoundingClientRect()%20%E6%98%AF%20IE%20%E5%92%8C%20FF%20%E9%83%BD%E6%94%AF%E6%8C%81%E7%9A%84%E6%96%B9%E5%BC%8F%E3%80%82%20%0D%0Avar%20rect%20%3D%20ul.getBoundingClientRect()%3B%20%0D%0Avar%20heightAll%20%3D%20rect.bottom%20-%20rect.top%3B%20%0D%0A%2F%2F%E6%AF%8F%E4%B8%80%E5%B1%8F%E7%9A%84%E5%AE%9E%E9%99%85%E5%83%8F%E7%B4%A0%E9%AB%98%E5%BA%A6%20%0D%0Avar%20heightView%20%3D%20heightAll%20%2F%20this.numViews%3B%20%0D%0A%2F%2F%E6%AF%8F%E7%A7%BB%E5%8A%A81%E5%83%8F%E7%B4%A0%E7%94%A8%E7%9A%84%E6%AF%AB%E7%A7%92%E6%95%B0%20%0D%0Avar%20msPerPx%20%3D%20this.scrollTime%20%2F%20heightView%3B%20%0D%0A%0D%0A%2F%2F%E5%A4%8D%E5%88%B6%E5%87%BA%E4%B8%80%E4%BB%BD%E6%9D%A5%EF%BC%8C%E6%8E%A5%E5%9C%A8%E5%8E%9F%E5%9D%97%E7%9A%84%E5%90%8E%E9%9D%A2%EF%BC%8C%E7%94%A8%E4%BA%8E%E5%A4%B4%E6%8E%A5%E5%B0%BE%E7%9A%84%E6%98%BE%E7%A4%BA%20%0D%0Avar%20ulCopy%20%3D%20ul.cloneNode(true)%3B%20%0D%0AulCopy.style.top%20%3D%20heightAll%2B'px'%3B%20%0D%0Athis.container.appendChild(ulCopy)%3B%20%0D%0A%0D%0A%2F%2F%E8%A6%81%E5%9C%A8%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%87%BD%E6%95%B0%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%BD%93%E5%89%8D%E7%B1%BB%EF%BC%8C%E5%BE%97%E6%8A%8A%20this%20%E8%B5%8B%E5%80%BC%E7%BB%99%E4%B8%80%E4%B8%AA%E6%AD%A4%E8%8C%83%E5%9B%B4%E7%9A%84%E5%8F%98%E9%87%8F%EF%BC%8C%E5%A6%82%20itself%E3%80%82%E5%85%B6%E5%AE%9E%E6%AD%A4%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E5%8F%98%E9%87%8F%E9%83%BD%E6%98%AF%E7%9B%B4%E6%8E%A5%E5%8F%AF%E7%94%A8%E7%9A%84%EF%BC%8C%E5%A6%82%EF%BC%9AheightView%EF%BC%8C%20msPerPx%20%0D%0Avar%20itself%20%3D%20this%3B%20%0D%0A%2F%2F%E5%90%91%E4%B8%8A%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%87%BD%E6%95%B0%20%0D%0Avar%20scrollView%20%3D%20function()%20%0D%0A%7B%20%0D%0Avar%20oldTop%20%3D%20(''%3D%3Dul.style.top)%20%3F%200%3A%20parseInt(ul.style.top)%20%3B%20%0D%0A%2F%2F%E7%A7%BB%E5%8A%A8%E5%88%B0%E9%A1%B6%E5%90%8E%EF%BC%8C%E6%8A%8A%E4%BD%8D%E7%BD%AE%E5%A4%8D%E5%8E%9F%EF%BC%8C%E4%B8%A4%E4%B8%AA%E5%9D%97%E7%BB%A7%E7%BB%AD%E4%BB%8E%200%20%E5%BC%80%E5%A7%8B%E5%90%91%E4%B8%8A%E7%A7%BB%E3%80%82%20%0D%0Aif%20(oldTop%20%3C%20-heightAll)%20%0D%0A%7B%20%0D%0AoldTop%20%3D%200%3B%20%0D%0A%7D%20%0D%0Aul.style.top%20%3D%20(oldTop%20-%201)%20%2B'px'%3B%20%0D%0AulCopy.style.top%20%3D%20(oldTop%20%2B%20heightAll-%201)%20%2B'px'%3B%20%0D%0A%0D%0A%2F%2F%E6%AF%8F%E6%BB%9A%E4%B8%80%E6%95%B4%E5%B1%8F%E5%A4%9A%E5%81%9C%E4%B8%80%E4%BC%9A%E3%80%82oldTop-1%20%E6%98%AF%E4%B8%BA%E4%BA%86%E8%AE%A9%E5%85%B6%E5%81%9C%E5%9C%A8%E6%95%B4%E6%95%B0%E4%BD%8D%E7%BD%AE%E3%80%82%20%0D%0Avar%20duration%20%3D%20(0%20%3D%3D%20((oldTop-1)%20%25%20heightView))%20%3F%20itself.showTime%3AmsPerPx%3B%20%0D%0Aitself.timer%20%3D%20setTimeout(scrollView%2C%20duration)%3B%20%0D%0A%7D%3B%20%0D%0A%0D%0A%2F%2F%E6%8A%8A%20slide%20%E5%AE%9A%E4%B9%89%E4%B8%BA%20prototype%20%E7%9A%84%E6%96%B9%E6%B3%95%E6%97%B6%EF%BC%8C%E4%BC%BC%E4%B9%8E%E8%BF%99%E6%A0%B7%20setTimeout(itself.slide%2C%20itself.showTime)%3B%20%E5%AE%9A%E6%97%B6%E6%93%8D%E4%BD%9C%E4%B8%8D%E7%81%B5%EF%BC%8C%E8%80%8C%E5%8F%AA%E8%83%BD%E6%98%AF%E5%B1%80%E9%83%A8%E5%87%BD%E6%95%B0%E6%89%8D%E8%83%BD%E5%AE%9A%E6%97%B6%E6%93%8D%E4%BD%9C%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%B8%A6%E5%8F%82%E6%95%B0%EF%BC%8C%E8%BF%98%E5%BE%97%E5%B0%81%E8%A3%85%E6%88%90%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0%EF%BC%9A%20%0D%0Aitself.timer%20%3D%20setTimeout(scrollView%2C%20itself.showTime)%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E4%B8%8A%E6%97%B6%E5%81%9C%E6%AD%A2%E6%BB%9A%E5%8A%A8%20%0D%0Athis.container.onmouseover%20%3D%20function()%20%0D%0A%7B%20%0D%0Awindow.clearTimeout(itself.timer)%3B%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%BC%80%E6%97%B6%E7%BB%A7%E7%BB%AD%E6%BB%9A%E5%8A%A8%EF%BC%8C%E4%B8%8D%E7%94%A8%E5%8C%BA%E5%88%86%E5%BD%93%E6%97%B6%E6%98%AF%E5%9C%A8%E6%95%B4%E5%B1%8F%E5%81%9C%E6%AD%A2%E8%BF%98%E6%98%AF%E6%BB%9A%E5%8A%A8%E4%B8%AD%E4%BA%86%EF%BC%8C%E5%85%A8%E9%83%BD%E6%8C%89%E9%9D%99%E6%AD%A2%E6%97%B6%E9%97%B4%E6%9D%A5%E5%BB%B6%E6%97%B6%E5%B0%B1%E5%BE%97%E4%BA%86%E3%80%82%20%0D%0Athis.container.onmouseout%20%3D%20function()%20%0D%0A%7B%20%0D%0Aitself.timer%20%3D%20setTimeout(scrollView%2C%20itself.showTime)%3B%20%0D%0A%7D%3B%20%0D%0A%7D%3B%20%0D%0Awindow.onload%20%3D%20function()%20%0D%0A%7B%20%0D%0A%2F%2F%E7%AC%AC%E4%B8%80%E4%B8%AA%E6%80%BB%E5%85%B1%2020%20%E8%A1%8C%EF%BC%8C%E6%AF%8F%E6%AC%A1%E6%98%BE%E7%A4%BA%204%20%E8%A1%8C%EF%BC%8C%E5%88%86%205%20%E5%B1%8F%20%0D%0Avar%20s1%20%3D%20new%20ScrollUl('scrollUlTest1'%2C%205%2C%202000%2C%201000)%3B%20%0D%0A%2F%2F%E7%AC%AC%E4%BA%8C%E4%B8%AA%E6%80%BB%E5%85%B1%2018%20%E8%A1%8C%EF%BC%8C%E6%AF%8F%E6%AC%A1%E6%98%BE%E7%A4%BA%206%20%E8%A1%8C%EF%BC%8C%E5%88%86%203%20%E5%B1%8F%20%0D%0Avar%20s2%20%3D%20new%20ScrollUl('scrollUlTest2'%2C%203%2C%203000%2C%202000)%3B%20%0D%0A%7D%3B%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E"> </head> <body> <h1>通用滚动板演示</h1> <h4>第1组</h4> <div 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 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需刷新才能执行
]
教程首页
更多教程