JavaScript CSS 通用循环滚动条

更新时间：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; } /*演示多个滚动板同时使用，这里是统一按每行按 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> <script type="text/javascript" language="javascript">  </script> </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需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序之滑动页面隐藏和显示组件功能的实现代码
这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
原生js+ajax分页组件
这篇文章主要为大家详细介绍了原生js+ajax分页组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JavaScript基本语法_动力节点Java学院整理
这篇文章主要介绍了JavaScript基本语法，适合刚入门的同学，有兴趣的可以了解下。
2017-06-06
ECMAScript6函数剩余参数（Rest Parameters）
这篇文章主要介绍了ECMAScript6函数剩余参数（Rest Parameters）的相关资料,需要的朋友可以参考下
2015-06-06
CountUp.js数字滚动插件使用方法详解
这篇文章主要为大家详细介绍了CountUp.js数字滚动插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
jquery 滚动条事件简单实例
这篇文章介绍了jquery滚动条事件的简单实例，有需要的朋友可以参考一下
2013-07-07
uni-app多环境配置实现自动部署的方式详解
前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于uni-app多环境配置实现自动部署的相关资料,需要的朋友可以参考下
2022-06-06
微信小程序实现一张或多张图片上传（云开发）
这篇文章主要介绍了微信小程序实现一张或多张图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
JavaScript设计模式经典之工厂模式
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式，感兴趣的朋友一起学习吧
2016-02-02
JS组件Bootstrap Table表格行拖拽效果实现代码
这篇文章分享了JS组件Bootstrap Table表格行拖拽效果实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12