JS上下无缝滚动

html代码

<?xml version="1.0" encoding="UTF-8" ?>  
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!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=UTF-8" />  
<title>scrollTop测试示例</title>  
   
<style>  
<!--   
#out {   
    width:200px;   
    height:80px;   
    border:solid 1px blue;   
    overflow:hidden;   
}   
#in ul {   
    width: 100%;   
}   
#in ul li {   
    width: 60%;   
    float: left;   
    overflow: hidden;   
    list-style: none;   
}   
--> 
</style>  
</head>  
<body>  
<div id="out">  
    <div id="in">  
        <ul>  
            <li>第1行</li>  
            <li>第2行</li>  
            <li>第3行</li>  
            <li>第4行</li>  
            <li>第5行</li>  
        </ul>  
        <div style="clear: both;"></div>  
    </div>  
</div>  
</body>  
</html>  

Js代码

<script type="text/javascript">   
var $ = function(id) {   
    return "string" == typeof id ? document.getElementById(id) : id;   
};   
// 实例化一个对象并调用对象的initialize方法   
var Class = {   
    create : function() {   
        return function() {   
            this.initialize.apply(this, arguments);   
        };   
    }   
};   
// 为Object添加一个extend方法   
Object.extend = function(destination, source) {   
    for ( var property in source) {   
        destination[property] = source[property];   
    }   
    return destination;   
};   
// 为对象注册事件   
var addEventHandler = function(oTarget, sEventType, fnHandler) {   
    if (oTarget.addEventListener) {   
        oTarget.addEventListener(sEventType, fnHandler, false);   
    } else if (oTarget.attachEvent) {   
        oTarget.attachEvent("on" + sEventType, fnHandler);   
    } else {   
        oTarget["on" + sEventType] = fnHandler;   
    }   
};   
var Scroll = Class.create();   
Scroll.prototype = {   
    initialize : function(outObj, inObj, options) {   
        var oScroll = this;   
        var iOut = $(outObj);   
        var iIn = $(inObj);   
        this.outHeight = iOut.offsetHeight;   
        this.inHeight = iIn.offsetHeight;   
   
        if (this.outHeight >= this.inHeight) return;   
   
        iOut.style.overflow = "hidden";   
        iIn.appendChild(iIn.cloneNode(true));   
   
        this.setOptions(options);   
        this.outObj = iOut;   
        this.timer = null;   
   
        this.side = 1; // 1：向上；2：向下   
        switch(this.options.side) {   
            case "down" :   
                this.side = -1;   
                break;   
            case "up":   
            default:   
                this.side = 1;   
        }   
        addEventHandler(iIn, "mouseover", function() {oScroll.stop();});   
        addEventHandler(iIn, "mouseout", function() {oScroll.start();});   
        this.start();   
    },   
    setOptions : function(options) {   
        this.options = {   
            step : 1, // 每次滚动的px量   
            side : "up", // 滚动的方向   
            time : 10 // 滚动的间隔时间（滚动速度）   
        };   
        Object.extend(this.options, options || {});   
    },   
    scroll : function() {   
        var inHeight = this.inHeight, outHeight = this.outHeight, iStep = this.options.step * this.side, time = this.options.time;   
        var iScrollTop = this.outObj.scrollTop;   
        if (iScrollTop >= (inHeight * 2 - outHeight)) {   
            iScrollTop -= inHeight;   
        } else if (iScrollTop <= 0) {   
            iScrollTop += inHeight;   
        }          
        this.outObj.scrollTop = iScrollTop + iStep;   
            
        var oScroll = this;   
        this.timer = setTimeout(function() {oScroll.scroll();}, time);   
    },    
    start : function() {   
        this.scroll();   
    },   
    stop : function() {   
        clearTimeout(this.timer);   
    }   
};   
window.onload = function() {   
    new Scroll("out", "in", {step : 1, side : "up", time : 20});   
};   
</script>  

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/archive/2011/04/27/2030757.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @ 2011-04-27 16:34 【唐】三三阅读(1123) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：【唐】三三
园龄： 14年3个月
粉丝： 176
关注： 64

+加关注

2011年4月

日

一

二

三

四

五

六

【唐】三三

ConFused Road, ConFused People, All In [Tang]San.

JS上下无缝滚动

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (3)

随笔分类 (727)

随笔档案 (675)

相册 (11)

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论