JavaScript CSS 通用循环滚动条

时间:2020-05-12 人气:0

<!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"> 
<!-- 
/* 
通用滚动板 
2009-9-9 15:16:13 
作者：雪峰 
欢迎转载使用，请包含此段完整说明。 
*/

//最后每屏高度 heightView 和要移动的 ul 节点都改用上级范围内的变量，从而 scrollView 函数不用传参数了，这样在 setTimeout 时就可以更简便地用 setTimeout(scrollView, duration);而不再用套层匿名函数了。 
/** 
containerId 滚动板外层节点的 ID 
numViews 分几屏滚动，需要滚动显示的总行数应该是分屏数的整倍数。 
showTime 每屏固定住时显示的时间，单位毫秒 
scrollTime 每次滚动一屏用的时间，单位毫秒 
*/ 
var ScrollUl=function(containerId, numViews, showTime, scrollTime) 
{ 
//定时器变量，因为有移到层上时停止滚动的事件处理，而那时可能还没开始定时器呢，所以先把这个变量声明出来。 
this.timer=null; 
this.numViews = numViews; 
this.showTime = showTime; 
this.scrollTime = scrollTime;

this.container = document.getElementById(containerId); 
var ulChild = this.container.getElementsByTagName('ul'); 
//这里只有一个 ul 节点，取得它 
var ul = ulChild[0]; 
//ul 是未使用 CSS 明确指定高度的，IE 中用 realstyle 取不到高度，只能得到 auto，而 getBoundingClientRect() 是 IE 和 FF 都支持的方式。 
var rect = ul.getBoundingClientRect(); 
var heightAll = rect.bottom - rect.top; 
//每一屏的实际像素高度 
var heightView = heightAll / this.numViews; 
//每移动1像素用的毫秒数 
var msPerPx = this.scrollTime / heightView;

//复制出一份来，接在原块的后面，用于头接尾的显示 
var ulCopy = ul.cloneNode(true); 
ulCopy.style.top = heightAll+'px'; 
this.container.appendChild(ulCopy);

//要在事件处理函数中使用当前类，得把 this 赋值给一个此范围的变量，如 itself。其实此范围内的变量都是直接可用的，如：heightView， msPerPx 
var itself = this; 
//向上滚动的函数 
var scrollView = function() 
{ 
var oldTop = (''==ul.style.top) ? 0: parseInt(ul.style.top) ; 
//移动到顶后，把位置复原，两个块继续从 0 开始向上移。 
if (oldTop < -heightAll) 
{ 
oldTop = 0; 
} 
ul.style.top = (oldTop - 1) +'px'; 
ulCopy.style.top = (oldTop + heightAll- 1) +'px';

//每滚一整屏多停一会。oldTop-1 是为了让其停在整数位置。 
var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx; 
itself.timer = setTimeout(scrollView, duration); 
};

//把 slide 定义为 prototype 的方法时，似乎这样 setTimeout(itself.slide, itself.showTime); 定时操作不灵，而只能是局部函数才能定时操作，如果带参数，还得封装成匿名函数： 
itself.timer = setTimeout(scrollView, itself.showTime); 
//鼠标移上时停止滚动 
this.container.onmouseover = function() 
{ 
window.clearTimeout(itself.timer); 
}; 
//鼠标移开时继续滚动，不用区分当时是在整屏停止还是滚动中了，全都按静止时间来延时就得了。 
this.container.onmouseout = function() 
{ 
itself.timer = setTimeout(scrollView, itself.showTime); 
}; 
}; 
window.onload = function() 
{ 
//第一个总共 20 行，每次显示 4 行，分 5 屏 
var s1 = new ScrollUl('scrollUlTest1', 5, 2000, 1000); 
//第二个总共 18 行，每次显示 6 行，分 3 屏 
var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000); 
}; 
--> 
</script>

</head> 
<body> 
<h1>通用滚动板演示</h1> 
<h4>第1组</h4> 
<div> 
<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>

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

加载全部内容