/**
 * created by benyip on 2016/5/15.
 */

/**
 * 传统的 <marquee> 标签可以简单实现文本的滚动效果，但是各浏览器的表现略有不一致（如不够平滑）
 * 例如：
    <marquee direction="left" behavior="scroll" scrollamount="10" scrolldelay="90"
       style="border: solid black 1px; padding: .5em;"
       onmouseover="this.stop()" onmouseout="this.start()">
           start_+++000111222333444555666777888999+++_end
    </marquee>
 *
 * =====================================
 * 本插件使用方式：
 * -- dom结构：
     <p class="container">
         111 222 333 444
     </p>
 * -- 调用：
     $('.container').marquee();
 * -- 选项：
 *   delay：每次向左移动 1px 时间间隔，单位为ms，默认20ms
 *
 * -- 最好为 .container 加上样式（不加也可以）：
 *          white-space: nowrap;
 *          overflow: hidden;
 */
(function ($) {
    $.fn.marquee = function (setting) {

        setting = $.extend({
            delay: 20 //每次向左移动 1px 时间间隔，单位为ms
        }, setting);

        var text = this.text();
        this.html('').append(
            '<span class="marquee-wrapper" style="position:relative;display:block;width:100%;white-space:nowrap;overflow:hidden;">'
            + '<span class="marquee-content">'
            + text
            + '</span>'
            + '</span>');

        var $content = this.find('.marquee-content');
        var contentwidth = $content.width();
        var marqueeviewportwidth = this.width();

        //如果太短就不要滚动了
        if (contentwidth < marqueeviewportwidth) {
            return;
        }

        //复制一份作为视觉补充
        $content.clone().appendto(this.find('.marquee-wrapper'));

        //滚动位置控制
        var wrapper = this.find('.marquee-wrapper').get(0);
        var _run = function () {
            if (wrapper.scrollleft < contentwidth) {
                wrapper.scrollleft++;
            } else {
                wrapper.scrollleft -= contentwidth;
            }
        };

        //设置超时间歇调用
        var intervalid = setinterval(_run, setting.delay);
        $(wrapper).on('mouseenter', function () {
            clearinterval(intervalid);
        }).on('mouseleave', function () {
            intervalid = setinterval(_run, setting.delay);
        });
    }
})(jquery);