marquee.js

marquee.js

$.fn.marquee = function (options) {
    var $that = this
    var that  = this[0]
    if (!that) return

    options = $.extend({}, {
        speed: 50
    }, options)

    var timer = setInterval(marquee, options.speed)

    $that
        .on('touchstart', function () {
            clearInterval(timer)
        })
        .on('touchend', function () {
            timer = setInterval(marquee, options.speed)
        })

    function marquee() {
        var offset          = that.scrollHeight - that.offsetHeight
        var $firstItem      = $that.children().first()
        var firstItemHeight = parseInt(getComputedStyle($firstItem[0]).height)


        if (offset === 0) {
            return
        }
        // 不足于滚动补充到足够
        else if (offset < firstItemHeight) {
            $that.append($('<div class="clone"></div>').css('height', offset))
        }

        if (that.scrollTop >= firstItemHeight) {
            $firstItem.appendTo($that)
            that.scrollTop = 0
        } else {
            that.scrollTop++
        }
    }
}

$(function () {
    $('[data-marquee]').marquee()
})