首页 > 网站 > WEB开发 > 正文

jquery文字左右滚动

2024-04-27 15:01:26
字体:
来源:转载
供稿:网友

实现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);    }

  


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表