JavaScript的循环滚动代码-btpka3-ChinaUnix博客

树欲静而风不止btpka3.blog.chinaunix.net
首页　| 　博文目录　| 　关于我
btpka3
博客访问： 530513
博文数量： 135
博客积分： 3568
博客等级：中校
技术积分： 1942
用户组：普通用户
注册时间： 2006-10-19 17:52
文章分类
全部博文（135）
HTML（1）
english（0）
CSS（4）
Flex（6）
PHP（3）
private（10）
7788（6）
shell（6）
Java（71）
C/C++（11）
Linux（6）
JavaScript（9）
未分配的博文（2）
文章存档
2012年（29）
2011年（41）
2010年（26）
2009年（12）
2008年（9）
2007年（12）
2006年（6）
我的朋友
相关博文
JavaScript的循环滚动代码
分类：系统运维
2008-08-19 00:05:12
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- 
题目：JavaScript的循环滚动代码
作者：btpka3@163.com
日期：2008/08/16 至 2008/08/18
起因：在qq群 javascript技术群I 看到一位Q友发帖问循环滚动的问题，闲来无事，
就来捣鼓捣鼓了。实现功能有：垂直，水平滚动；鼠标悬停。IE和FF均可运行。
整理代码如下。：

-->
<html>
<head>
<title> Javascript滚动代码 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<SCRIPT type=text/javascript>
/**
 * 滚动容器类，提供滚动呈现容器内滚动条目的功能。
 * @param initStatus 类型为ScrollContainer.Status，它给出初始设定
 */
ScrollContainer = function(initStatus){
    this.status = initStatus ? initStatus : new ScrollContainer.Status();
    this.styleBackup = {};
    this.attributeBackup = {};

    /**
     * 开始滚动，首先进行一些初始化功能
     */
    this.startScroll = function(){
        var status = this.status;
        var container = status.container;
        // 备份 属性
        this.attributeBackup["onmouseover"] = container.onmouseover;
        this.attributeBackup["onmouseout"] = container.onmouseout;
        // 重新设定属性
        container.onmouseover = function(){status.isMouseOver = true;};
        container.onmouseout = function(){status.isMouseOver = false;};
        // 备份 style
        this.styleBackup["width"] = container.style.width;
        this.styleBackup["height"] = container.style.height;
        this.styleBackup["overflow"] = container.style.overflow;
        // 重新设定 style
        container.style.width = status.itemWidth;
        container.style.height = status.itemHeight;
        container.style.overflow = "hidden";
        // clone 第一个 Item
        var clonedFirstItem = status.items[0].cloneNode(true);
        status.items.push(clonedFirstItem);
        if (status.scrollVertical){
            container.appendChild(clonedFirstItem);
        } else {
            status.subContainer.style.width = status.itemWidth * (status.items.length + 1);
            status.subContainer.appendChild(clonedFirstItem);
        }
        // 启动滚动
        if (this.timerHandler == 0){
            this.timerHandler = setInterval(this.doScroll, this.status.interval);
        }
    };

    /**
     * 停止到某个滚动条目上，index 从 0 开始。
     */
    this.stopScrollAt = function(index){// index 从 0 开始
        index = index % (this.status.items.length -1);
        this.status.isStoped = true;
        if (this.status.scrollVertical){
            this.status.container.scrollTop = index * this.status.itemHeight;
        } else {
            this.status.container.scrollLeft = index * this.status.itemWidth;
        }
    };

    /**
     * 继续滚动，起作用与 stopScrollAt 函数调用之后用。
     */
    this.goOnScroll = function(){
        this.status.isStoped = false;
    };

    /**
     * 清除滚动，并将滚动容器状态复位。
     */
    this.clear = function(){
        var status = this.status;
        // 清除滚动
        clearInterval(this.timerHandler);
        this.timerHandler = 0;
        // 删除最后的那个 clone 的 Item
        if (status.scrollVertical){
            status.container.removeChild(status.container.lastChild);
        } else {
            status.subContainer.style.width = (status.items.length -1) * status.itemWidth;
            status.subContainer.removeChild(status.subContainer.lastChild);
        }
        // 恢复 style 设置
        for (var key in this.styleBackup){
            status.container.style[key] = this.styleBackup[key];
        }
        // 恢复属性
        for (var key in this.attributeBackup){
            status.container[key] = this.attributeBackup[key];
        }
    };

    this.timerHandler = 0;
    var status = this.status;

    /**
     * 该函数由计时器调用，用于更新滚动界面。
     */
    this.doScroll = function(){
        // 鼠标悬停中或停止中
        if (status.isMouseOver || status.isStoped){
            return;
        }
        // 暂停显示某个Item中
        if (status.isPaused){
            // 暂停时间 ++
            status.pausedTime += status.interval;
            // 未超时就返回
            if (status.pausedTime < status.pauseTimeout){
                return;
            }
            // 超时就将暂停状态复位，之后返回
            status.pausedTime = 0;
            status.isPaused = false;
            return;
        }
        // 继续滚动中
        if (status.scrollVertical){
            status.container.scrollTop ++;
            if ((status.container.scrollTop % status.itemHeight) == 0){
                // 要继续滚动时，先检测是否已经到了位于最后的clone的第一个Item
                if (status.container.scrollTop >= (status.items.length - 1) 
                        * status.itemHeight){
                    // 若到达最后则重新开始
                    status.container.scrollTop = 0;
                }
                status.isPaused = true;
            }
        } else {
            status.container.scrollLeft ++;
            if ((status.container.scrollLeft % status.itemWidth) == 0){
                // 要继续滚动时，先检测是否已经到了位于最后的clone的第一个Item
                if (status.container.scrollLeft >= (status.items.length - 1) 
                        * status.itemWidth){
                    // 若到达最后则重新开始
                    status.container.scrollLeft = 0;
                }
                status.isPaused = true;
            }
        }
    }

};
/**
 * 用于设定滚动容器的一些初始值，在滚动过程中也将一些其他状态变量保存于此。
 * @param container 包含滚动条目的容器的ID字符串
 * @param itemWidth 滚动单个条目的宽度，水平滚动时用到
 * @param itemHeight 滚动单个条目的高度，垂直滚动时用到
 * @param pauseTimeout 滚动到单个条目上时，停顿的时间，单位：毫秒
 * @param interval 多长时间滚动一个像素，单位：毫秒
 * @param scrollVertical 指明是垂直滚动还是水平滚动，true - 垂直滚动
 */
ScrollContainer.Status = function(container, itemWidth,
                itemHeight, pauseTimeout, interval, scrollVertical){
    this.container = document.getElementById(container);
    this.itemWidth = itemWidth;
    this.itemHeight = itemHeight;
    this.pauseTimeout = pauseTimeout && pauseTimeout > 20
                            ? pauseTimeout : 1000;//???
    this.interval = interval;
    this.scrollVertical = scrollVertical;

    this.items = [];
    this.subContainer;  //只有在 scrollVertical 为 false，即水平滚动时才有值
    if (scrollVertical){
        for (var i=0; i<this.container.childNodes.length; i++){
            if (this.container.childNodes[i].nodeType == 1){
                this.items.push(this.container.childNodes[i]);
            }
        }
    } else {
        var subContainer ;
        for (var i=0; i<this.container.childNodes.length; i++){
            if (this.container.childNodes[i].nodeType == 1){
                this.subContainer = this.container.childNodes[i];
                break;
            }
        }
        for (var j=0; j<this.subContainer.childNodes.length; j++){
            if (this.subContainer.childNodes[j].nodeType == 1){
                this.items.push(this.subContainer.childNodes[j]);
            }
        }
    }
    this.isPaused = true;
    this.pausedTime = 0;
    this.isMouseOver = false;
    this.isStoped = false;
};


var scroll = [];
function test1Scroll(){
    var initStatus = new ScrollContainer.Status("test1",500,25,1000,40, true);
    scroll[0]=new ScrollContainer(initStatus);
    scroll[0].startScroll();
}
function test2Scroll(){
    var initStatus = new ScrollContainer.Status("test2",500,30,1000,40, true);
    scroll[1]=new ScrollContainer(initStatus);
    scroll[1].startScroll();
}
function test3Scroll(){
    var initStatus = new ScrollContainer.Status("test3",200,50,1000,40, false);
    scroll[2]=new ScrollContainer(initStatus);
    scroll[2].startScroll();
}
</script>
<style type=text/css>
/**/
*{margin:0;padding:0;}
#test1 {background:#FF6600;}
#test1 li{line-height:25px;}
#test2 {background:#FF88C2;}
#test2 div{line-height:30px;}
#test3 {background: #FF88C2; }
#test3_s {width: 800px; background: #FFF0F5;}
#test3_s span{width: 200px; line-height:50px;}
</style>
</head>

<body>

<ul id="test1" >
  <li style="background: #ADD8E6;"><a href="javascript:void(0);">哈尔滨工业大学（威海）软件学院000000</a></li>
  <li style="background: #F0FFFF;"><a href="javascript:void(0);">哈尔滨工业大学（威海）软件学院111111</a></li>
  <li style="background: #EED2EE;"><a href="javascript:void(0);">哈尔滨工业大学（威海）软件学院222222</a></li>
  <li style="background: #FFEC8B;"><a href="javascript:void(0);">哈尔滨工业大学（威海）软件学院333333</a></li>
</ul><br>
<input type=button value="UL - 纵向滚动" onclick="test1Scroll();">
<input type=button value="UL - StopAt2"  onclick="scroll[0].stopScrollAt(2);">
<input type=button value="UL - GoOn"     onclick="scroll[0].goOnScroll();">
<input type=button value="UL - Clear"    onclick="scroll[0].clear();">
<br><br><br>


<div id="test2" >
  <div style="background: #ADD8E6;"><a href="javascript:void(0);">btpka3@163.com-000000</a></div>
  <div style="background: #F0FFFF;"><a href="javascript:void(0);">btpka3@163.com-111111</a></div>
  <div style="background: #EED2EE;"><a href="javascript:void(0);">btpka3@163.com-222222</a></div>
  <div style="background: #FFEC8B;"><a href="javascript:void(0);">btpka3@163.com-333333</a></div>
</div>
<br>
<input type=button value="DIV - 纵向滚动" onclick="test2Scroll();">
<input type=button value="DIV - StopAt4"  onclick="scroll[1].stopScrollAt(4);">
<input type=button value="DIV - GoOn"     onclick="scroll[1].goOnScroll();">
<input type=button value="DIV - Clear"    onclick="scroll[1].clear();">
<br><br><br>


<div id="test3" >  
<div id="test3_s" >
<!-- 
注意：上一个</span>结尾标签和下一个<span>开始标签之间、
以及最后一个</span>结尾标签和</div>结尾标签之间不要有空格等字符，
他们会占用一些像素 -->
  <span style="background: #ADD8E6;">
  <a href="javascript:void(0);">btpka3@163.com-000000000</a></span><span style="background: #F0FFFF;">
  <a href="javascript:void(0);">btpka3@163.com-111111111</a></span><span style="background: #EED2EE;">
  <a href="javascript:void(0);">btpka3@163.com-222222222</a></span><span style="background: #FFEC8B;">
  <a href="javascript:void(0);">btpka3@163.com-333333333</a></span></div>
</div>
<br>
<input type=button value="SPAN - 横向滚动" onclick="test3Scroll();">
<input type=button value="SPAN - StopAt20" onclick="scroll[2].stopScrollAt(20);">
<input type=button value="SPAN - GoOn"     onclick="scroll[2].goOnScroll();">
<input type=button value="SPAN - Clear"    onclick="scroll[2].clear();">
<br><br>


<script type="text/javascript" src="/js/jquery.qqFace.js"></script>
</body>
</html>
阅读(1881) | 评论(1) | 转发(0) |
上一篇：Gmail Driver 中文目录乱码
下一篇：AWK 使用 Shell 变量
给主人留下些什么吧！~~
chinaunix网友2009-02-28 12:41:45
垃圾代码
回复 | 举报
感谢所有关心和支持过ChinaUnix的朋友们
16024965号-6