jquery文字左右滚动

实现jquery文字左右滚动

 

<div class="fl">中奖名单：</div> 
   <div class="scrollText">                        
     <ul>
        <li><span>138****7874</span>获得充电宝</li>
        <li><span>138****7874</span>获得better</li>
        <li><span>138****7874</span>获得充电宝</li>
        <li><span>138****7874</span>获得better</li>
    </ul>
   </div>
 </div>

　　

css 

.scrollText {
    width: 260px;
    float: left;
    overflow: hidden;

    ul li {
        float: left;
        padding-right: 10px;
    }

    ul:after {
        content: '';
        clear: both;
        display: table;
    }
}

　　

调用的js

setTimeout(function (){
            scrollLeftToRight();
        },1000);


function scrollLeftToRight(){
        var $wrap = $('.scrollText');
        var $ul = $wrap.find('ul');
        var wrap_width = $wrap.width();
        var timer = null;
        var li_w = 0;

        $ul.find('li').each(function () {
            li_w += $(this).outerWidth();
        });

        if (li_w <= wrap_width) {
            return false;
        }

        $ul.css('width', li_w);

        var i = 0;
        var x = 0;
        function _marquee() {
            var _w = $ul.find('li:eq(0)').outerWidth();
            i ++;
            if (i >= _w) {
                $ul.find('li:eq(0)').remove();
                i = 0;
                x = 0;
            } else {
                $ul.find('li:eq(0)').css('marginLeft', -i);
                if (i >= Math.max(_w - wrap_width, 0)) {
                    if (x === 0) {
                        var _li = $ul.find('li:eq(0)').clone(true);
                        $ul.append(_li.css('marginLeft', 0));
                        x = 1;
                    }
                }
            }
            var _ul_w = 0;
            $ul.find('li').each(function () {
                _ul_w += $(this).outerWidth();
            });

            $ul.css('width', _ul_w);
        }

        timer = setInterval(_marquee, 20);
    }

　　

转载于:https://www.cnblogs.com/gzx618/p/4816249.html