jquery文字左右滚动
2015-09-17 14:13
525 查看
实现jquery文字左右滚动
css
调用的js
<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); }
相关文章推荐
- JQuery实现级联下拉框效果实例讲解
- JQuery常用方法
- jquery mobile导致无法修改textarea的高度
- 锋利的Jquery【读书笔记】 -- 第五章 jQuery对表单表格的操作
- 学习笔记(四):jQuery之动画效果
- jquery.autocomplete API
- jQuery软键盘插件
- 学习笔记(三):jQuery之DOM
- jquery 组合键键盘事件
- JQuery Ajax 在asp.net中使用总结
- jQuery下的Ajax调试步骤
- jQuery实现仿腾讯迷你首页选项卡效果代码
- jQuery Mobile
- 判断页面中是否引用jQuery
- jQuery实现仿美橙互联两级导航菜单效果完整实例
- $( function() {} );和$( function($) {} );和( function($){} )(jQuery);的异同
- JQuery 页面如何快速滚动到顶部?
- jquery scrollUp滚动到顶部
- JQuery日记6.5 Javascript异步模式(一)
- 用jQuery和PHP来实现微信转盘抽奖程序 附源代码