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

  

jquery文字左右滚动的更多相关文章

  1. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery文字上下滚动的实现方法

    jquery实现文字上下滚动的方法. 代码: //上下滚动var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...

  3. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  4. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  5. jquery文字纵向滚动效果(带间隔停留)

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  6. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  8. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  9. jQuery实现公告文字左右滚动的代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Web APP 随笔

    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备). 开发者们都知道在高端智能手机 ...

  2. javaio学习笔记-字符流类(1)

    1.java.io包中的字符流类-BufferedReader和BufferedWriter: BufferedReader:缓存的输入字符流; BufferedWriter:缓存的输出字符流; In ...

  3. iOS开发——语法篇OC篇&静态方法与实例方法

    静态方法与实例方法 方法是类的行为,写在接口和实现两个文件中.在接口部分声明方法,在实现部分实现方法. 1.类方法与实例方法 Objective-C中的类可以声明两种类型的方法:实例方法和类方法.实例 ...

  4. [原创]经历:asp.net oracle 部署问题以及解决方法

    精简的美丽...... 一.环境    开发环境        win7 64bit         Vs2010        Oracle 11g r2 64bit        <inst ...

  5. Ruby on Rails Tutorial 第六章 用户模型

    1.用户模型(1)数据库迁移Rails默认使用关系数据库存储数据,数据库中的表有数据行组成,每一行都有相应的列,对应数据属性.把列名命名为相应的名字后,ActiveRecord会自动把他们识别为用户对 ...

  6. Ruby on Rails Tutorial 第一章 之 简介

    1.目标:掌握MVC和REST.生成器.迁移.路由.嵌入式Ruby 本书涉及Rails,Ruby语言,Rails默认使用的测试框架(MiniTest),Unix命令行,HTML,CSS,少量的Java ...

  7. 【张泽华】android视频教程下载地址及上课源代码

    http://note.youdao.com/share/?id=f39bf918842c7b0673a033d35d734073&type=notebook#/1AC357745ED74BC ...

  8. 分布式ActiveMQ集群--转载

    原文地址:http://shensy.iteye.com/blog/1752529 回顾总结前一段时间学习的ActiveMQ分布式集群相关的知识,分享出来希望对看到的人有所帮助. 一.分布式Activ ...

  9. Quartus II 12.0 下载、安装和破解

    转载:http://www.cnblogs.com/imapla/archive/2012/09/10/2678814.html 20130417 Quartus II 12.0 不支持波形仿真,推荐 ...

  10. 关于删除linux多余内核

    step 1: 查找当前正在使用的内核文件的版本号 #uname -r step 2: 列出所有的内核文件,使用rpm 或者 dpkg(基于linux系统) 命令  #rpm -q kernel 或者 ...