实现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); }
时间: 2024-10-29 14:47:28