纯Js ——文字上下左右滚动

ScrollBaseJs.js

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

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

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

var CurrentStyle = function (element) {
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

//容器对象，滑块对象，参数
var ScrollCon = Class.create();

ScrollCon.prototype = {
    //构造函数
    initialize: function (area, bar, itag, options, ibarTgNum) {
        this._area = $$(area);
        this._bar = $$(bar);
        this._time = null;
        this._barTgNum = $$(ibarTgNum);
        this.SetOption(options);
        this._step = this._options.step; //改变量
        this._pause = this._options.pause;
        this._speed = this._options.speed;
        this._mgSide = this._options.side == "up" ? "marginTop" : "marginLeft";
        this._index = 0; //滚动索引
        this._tagIndex = 1; //滚动子项索引
        this._bar.appendChild(this._bar.cloneNode(true));
        this._barTagNum = this._bar.getElementsByTagName(itag).length;
        this.barH = this._bar.style.height || this._bar.offsetHeight;
        this.areaH = this._area.style.height || this._area.offsetHeight;
        this.areaW = this._area.style.width || this._bar.offsetWidth;
        this.barW = this._bar.style.width || this._bar.offsetWidth;
        this._bar.style[this._mgSide] = "0px";
        this.BindNumHtml();
        //添加样式

        // this.Auto();
    },
    //参数初始化
    SetOption: function (options) {
        //默认参数
        this._options = {
            step: 1, //改变量,
            side: "up",
            pause: 50, //隔多高停一次
            speed: 20, //滚动速度
            pauseStep: 1500//滚动停留时间
        };
        Object.extend(this._options, options || {});

    },
    EditMargin: function () {  //改变滚动条属性
        oThis = this;
        var Step = this._step;
        this._speed = this._options.speed;
        if (this._index >= this._pause) {  //判断是否到了停顿的时候
            this._index = Step = 0;  //索引，滚动改变量设为0
            this._speed = this._options.pauseStep;   //滚动速度设为滚动停留时间
            this._tagIndex++;
        } else {
            this._index += Step;
        }
        var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide]));
        this._bar.style[this._mgSide] = -(margin + Step) + "px";
        if (margin + Step >= (this._barTagNum - 1) * this._pause) {
            //  将滚动距离跳到滚动条复制前的最后一个标签
            this._bar.style[this._mgSide] = -(this._barTagNum / 2 - 1) * this._pause + "px";
            this._tagIndex = this._barTagNum / 2;   //直接赋值：即将要跳转的值为滚动条复制“值” 的第一个标签
        }

        oThis.Write(this.barW);
    },
    //获得偏移距离
    GetMargin: function () {
        return this._bar.style[this._mgSide];
    },
    Auto: function () {//自动滚动
        oThis = this; oThis.EditMargin();
        oThis.Re();

    },
    MoveTo: function (index) {
        oThis = this;
        this._index = 0;
        this._tagIndex = index;
        this._speed = 1000;
        oThis._bar.style[this._mgSide] = -index * this._pause + "px";
        oThis.Re();
        oThis.Write();
    },
    Move: function () {
        oThis = this;
        oThis.EditMargin();
        this._time = setTimeout(function () {
            oThis.Start();
        }, this._speed);
    },
    Start: function () {
        oThis = this;
        oThis.EditMargin();
    },
    Next: function () {
        oThis = this;
        this._index = 0;
        this._speed = 1000;
        this._tagIndex == 0 ? 1 : this._tagIndex;
        this._tagIndex++;
        var margin = this._tagIndex * this._pause;
        if (this._tagIndex >= this._barTagNum) {
            this._tagIndex = 0;
            margin = 0;
        }
        oThis._bar.style[this._mgSide] = -margin + "px";
        oThis.Re();
        oThis.Write(this._tagIndex);
    },
    Re: function () {
        oThis = this;
        clearTimeout(this._time);
        this._time = setTimeout(function () {
            oThis.Auto();
        }, this._speed);
        oThis.Write(this._tagIndex);
    },
    Pre: function () {
        oThis = this;
        var margin = Math.abs(parseInt(oThis._bar.style[this._mgSide])) - this._pause;
        if (margin == -this._pause) {
            margin = 0;
        }
        oThis._bar.style[this._mgSide] = -margin + "px";
        oThis.Re();
    },
    BindNumHtml: function () {
        oThis = this;
        for (var i = 1; i <= oThis._barTagNum / 2; SetHTML(i++)) { }
        function SetHTML(z) {
            var barNum = oThis._barTgNum.appendChild(document.createElement("li"));
            barNum.onclick = function () {
                oThis._bar.style.marginTop = oThis.MoveTo(z);
            }
            barNum.innerHTML = z--;
            barNum.style.cursor = "pointer";
            barNum.style.listStyle = "none";
            barNum.style.float = "left";
            barNum.style.paddingLeft = "5px";
        }
    },
    Write: function (value) {
        oThis = this;
        var strHtml = '<div style="border:red solid 1px;width:200px;float:left;">';
        strHtml += '<br>滚动区域高度：' + oThis.areaH;
        strHtml += '<br>滚动对象高度：' + oThis.barH;
        strHtml += '<br>滚动条距离：' + oThis.GetMargin();
        strHtml += '<br>oThis._index：' + oThis._index;
        strHtml += '<br>this._step：' + this._step;
        strHtml += '<br>_tagIndex：' + oThis._tagIndex;
        strHtml += '<br>_barTagNum：' + oThis._barTagNum;
        strHtml += '<br>value：' + value;
        strHtml += "</div>";
        $$("divWrite").innerHTML = strHtml;

    }
}

Scroll_8_31.htm:

<!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>
    <title></title>
    <style type="text/css">
        .con
        {
            width: 400px;
            height: 50px;
            border: solid 1px #000000;
            line-height: 50px;
            padding: 0px 10px;
            overflow: hidden;
        }
        .con *
        {
            margin: 0px;
            padding: 0px;
        }
        .conList
        {
            padding: 0px;
            width: 5000px;
        }

        .conList li
        {
            float: left;
            width: 390px;
            list-style: none;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <div id="divCon" class="con">
        <ul id="divConList" class="conList" style="">
            <li>热点新闻1</li>
            <li>热点新闻2</li>
            <li>热点新闻3</li>
            <li>热点新闻4</li>
            <li>热点新闻5</li>
            <li>热点新闻6</li>
        </ul>
    </div>
    <span></span>
    <ul id="barNum" style="float: left; border: red solid 1px; text-align: left">
    </ul>
    <input type="button" value="上一个" onclick="a.Pre()" />
    <input type="button" value="下一个" onclick="a.Next()" />
    <input type="button" value="自动" onclick="a.Auto()" />
    <input type="button" value="重启" onclick="a.Re()" />
    <div id="divWrite">
    </div>
</body>
</html>
<script src="ScrollBaseJs.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        window.a = new ScrollCon("divCon", "divConList", "li"
        , { speed: 10, pause: 400, pauseStep: 500, side: "left" }, "barNum");
    }
</script>