您现在的位置: 365建站网 > 365学习 > CSS+JavaScript 通用循环滚动条

CSS+JavaScript 通用循环滚动条

文章来源:365jz.com     点击数:878    更新时间:2009-10-04 11:12   参与评论

直接上源码啦:

<!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 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>
<br /><br /><br /><br /><br /><br />
<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>

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (878人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------