您的位置:首页 > Web前端 > JQuery

jquery文字左右滚动

2015-09-17 14:13 525 查看
实现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);
}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: