js滚动效果

    var $ = function(id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    var Class = {
        create: function() {
            return function() {
                this.initialize.apply(this, arguments);
            }
        }
    }

    Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }

    function addEventHandler(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 Scroller = Class.create();
    Scroller.prototype = {
        initialize: function(idScroller, idScrollMid, options, direction) {
            var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);

            this.heightScroller = oScroller.offsetHeight;
            this.heightList = oScrollMid.offsetHeight;
            
            this.widthScroller = oScroller.offsetWidth;
            this.widthList = oScrollMid.offsetWidth;
            
            if (this.heightList <= this.heightScroller && (direction=="up" && direction=="down")) return;
            if (this.widthList <= this.widthScroller && (direction=="left" && direction=="right")) return;

            oScroller.style.overflow = "hidden";
            oScrollMid.appendChild(oScrollMid.cloneNode(true));

            this.oScroller = oScroller;
            this.timer = null;

            this.SetOptions(options,direction);

            this.side = 1; //1是上 -1是下
            switch (this.options.Side) {
                case "down":
                    this.side = -1;
                    break;
                case "left":
                    this.side = "left";
                    break;
                case "right":
                    this.side = "right";
                    break;
                case "up":
                default:
                    this.side = 1;
            }

            addEventHandler(oScrollMid, "mouseover", function() { oScroll.Stop(); });
            addEventHandler(oScrollMid, "mouseout", function() { oScroll.Start(); });

            if ((this.options.PauseStep <= 0 || this.options.PauseHeight <= 0)&& (direction=="up" && direction=="down")) this.options.PauseStep = this.options.PauseHeight = 0;
            if ((this.options.PauseStep <= 0 || this.options.PauseWidth <= 0)&& (direction=="left" && direction=="right")) this.options.PauseStep = this.options.PauseWidth = 0;
            this.Pause = 0;

            this.Start();
        },
        //设置默认属性
        SetOptions: function(options,direction) {
            this.options = {//默认值
                Step: 1, //每次变化的px量
                Time: 40, //速度(越大越慢)
                Side: direction, //滚动方向:"up"是上，"down"是下
                PauseHeight: 0, //隔多高停一次
                PauseWidth : 0,
                PauseStep: 1//停顿时间(PauseHeight 大于0该参数才有效)
            };
            Object.extend(this.options, options || {});
        },
        //滚动
        Scroll: function() {
            var time = this.options.Time, oScroll = this,iStep = this.options.Step * this.side;
            if(this.side =="left" || this.side == "right"){
            
            var iScroll_left = this.oScroller.scrollLeft, time = 30, iStep = (this.side == "left") ? 3:-3;
                if(this.side == "left" && iScroll_left <0)  iScroll_left += this.widthList;
                this.oScroller.scrollLeft = (iScroll_left + iStep) > (this.oScroller.scrollWidth-this.widthScroller) ? (this.oScroller.scrollWidth-this.widthScroller): (iScroll_left + iStep);
                
            
//                var iScroll_left = this.oScroller.scrollLeft, iWidth = this.widthList;
//                iStep = this.options.Step * this.side/2;
//                if (this.side > 0) {
//                    if (iScroll_left >= (iWidth*2 - this.widthScroller)) { iScroll_left -= iWidth; }
//                } else {
//                    if (iScroll_left <= 0) { iScroll_left += iWidth; }
//                }
//                if (this.options.PauseWidth > 0) {
//                    if (this.Pause >= this.options.PauseWidth) {
//                        time = this.options.PauseStep;
//                        this.Pause = 0;
//                    } else {
//                        this.Pause += Math.abs(iStep);
//                        this.oScroller.scrollLeft = iScroll_left + iStep;
//                    }
//                } else { this.oScroller.scrollLeft = iScroll_left + iStep; }
            }
            else{
                var iScroll = this.oScroller.scrollTop, iHeight = this.heightList;

                if (this.side > 0) {
                    if (iScroll >= (iHeight * 2 - this.heightScroller)) { iScroll -= iHeight; }
                } else {
                    if (iScroll <= 0) { iScroll += iHeight; }
                }

                if (this.options.PauseHeight > 0) {
                    if (this.Pause >= this.options.PauseHeight) {
                        time = this.options.PauseStep;
                        this.Pause = 0;
                    } else {
                        this.Pause += Math.abs(iStep);
                        this.oScroller.scrollTop = iScroll + iStep;
                    }
                } else { this.oScroller.scrollTop = iScroll + iStep; }
            }
            this.timer = window.setTimeout(function() { oScroll.Scroll(); }, time);
        },
        //开始
        Start: function() {
            this.Scroll();
        },
        //停止
        Stop: function() {
            clearTimeout(this.timer);
        }
    };

 

 html：

<script type="text/javascript">
    new Scroller("idScroller", "idScrollMid", { PauseHeight: 100 },"up");
</script>