滚动-新闻

/**
文字滚动
**/

var WordScroll = function (area, list, options) {
    this._init(area, list, options);
};

WordScroll.prototype = {
    _init: function (area, list, options) {
        this.area = $(area);
        this.list = $(list);
        this._setOptions(options);
        this.speed = this.options.speed;
        this.step = this.options.step;
        this.index = 1;
        this.num = this.list.find("li").length;
    },
    _start: function () {
        var self = this;
        setInterval(function () {
            self._run();
        }, this.speed);
    },
    _run: function () {
        if (this.index < this.num) {
            this.index++;
            this.list.animate({ "marginTop": "-=" + this.step }, 500);
        } else {
            this.index = 1;
            this.list.animate({ "marginTop": 0 }, 1);
        }
    },
    _setOptions: function (options) {
        this.options = {
            speed: 1,
            step: 0
        };
        $.extend(this.options, options);
    }
}

<!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">
        .area
        {
            width: 400px;
            height: 50px;
            border: solid 1px #000000;
            line-height: 50px;
            padding: 0px 10px;
            overflow: hidden;
        }
        
        .area *
        {
            margin: 0px;
            padding: 0px;
        }
        
        .area ul li
        {
            list-style: none;
            padding: 0px 10px;
        }
        
        .arealist
        {
            margin-top: -0px;
        }
    </style>
</head>
<body>
    <div class="area">
        <ul class="arealist">
            <li>新闻一</li>
            <li>新闻二</li>
            <li>新闻三</li>
        </ul>
    </div>
</body>
</html>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../js/jone.js" type="text/javascript"></script>
<script src="WordScroll.js" type="text/javascript"></script>
<script type="text/javascript">
    var _wordScroll = new WordScroll(".area", ".arealist", { "speed": 1500, "step": "50" });
    _wordScroll._start();
</script>

posted on 2014-03-27 22:48 朝着阅读(157) 评论(0) 收藏举报