在别人网站中看到一个类似于弹幕的效果，闲来无事用jquery写了个备用~~

 <!DOCTYPE html>

 <meta charset="utf-8">

 <html>

 <head>

     <title></title>

     <script src="http://cdn.gbtags.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>

     <style type="text/css">

         .scroll li {

             position: fixed;

             display: inline-block;

             top: 70%;

             left: 100%;

             color: #fff;

             white-space: nowrap;

             font-size: 14px;

             text-align: center;

             z-index: 100;

             background: rgba(0,0,0,0.5);

             padding: 5px 25px;

             border-radius: 20px;

             font-size: 16px;

             list-style: none;

         }

     </style>

 </head>

 <body>

     <ul class="scroll">

         <li>156***91112&nbsp;&nbsp;  9分钟前注册成功</li>

         <li>152***92244&nbsp;&nbsp;  12分钟前注册成功</li>

         <li>159***92932&nbsp;&nbsp;  15分钟前注册成功</li>

         <li>139***04555&nbsp;&nbsp;  21分钟前注册成功</li>

         <li>155***59509&nbsp;&nbsp;  23分钟前注册成功</li>

         <li>135***93950&nbsp;&nbsp;  29分钟前注册成功</li>

         <li>155***52421&nbsp;&nbsp;  29分钟前注册成功</li>

         <li>132***22029&nbsp;&nbsp;  29分钟前注册成功</li>

         <li>155***42959&nbsp;&nbsp;  35分钟前注册成功</li>

         <li>155***09954&nbsp;&nbsp;  45分钟前注册成功</li>

     </ul>

 </body>

 <script>

     var num = 0;

     var arrColor = ['#5dd9ff','#fbe091','#ff0','#b5d8f4','#0f0','#0ff','#83dd57','#fff','#b4f4ff','#ccc','#fff'];

     function suiji() {

         $('.scroll li').eq(num).css('color',arrColor[parseInt(10*Math.random())]);

         $('.scroll li').eq(num).animate({'left':-300},20000,function () {

             $('.scroll li').eq(num).css('left','100%');

         });

     }

     suiji();

     setInterval(function () {

         num++;

         if (num>=10) {

             num = 0;

         }

         suiji();

     },22000);

 </script>

 </html>

jquery 实现类似于弹幕效果的更多相关文章

  1. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  2. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  3. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  4. Android弹幕功能实现，模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  5. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  6. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  7. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  8. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  9. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

随机推荐

  1. Thread多线程（二）：Runnable

        如果要让其他类使用线程就要用到runnable,其他thread就是实现了runnbale接口,其中run()方法就是对runnable接口中的run()方法的具体实现.有两个构造函数分别是: ...

  2. Intent属性详解三 data、type和extra

    1 Data  执行时要操作的数据 在目标<data/>标签中包含了以下几种子元素,他们定义了url的匹配规则: android:scheme 匹配url中的前缀,除了“http”.“ht ...

  3. 实用控件分享：自定义逼真相机光圈View

    最近手机界开始流行双摄像头,大光圈功能也应用而生.所谓大光圈功能就是能够对照片进行后期重新对焦,其实现的原理主要是对拍照期间获取的深度图片与对焦无穷远的图像通过算法来实现重新对焦的效果. 在某双摄手机 ...

  4. svn的使用（转载）

    这里只介绍使用CornerStone来使用SVN. CornerStone是Mac OS X系统下非常好用的一款svn工具,当然还有Versions也是可以用的,但是使用起来不如CornerStone ...

  5. python之(re)正则表达式上

    python正则表达式知识预备 正则表达式使用反斜杠" \ "来代表特殊形式或用作转义字符,这里跟Python的语法冲突,因此,Python用" \\\\ "表 ...

  6. Automysqlbackup: WARNING: Turning off multicore support, since pigz isn’t there.

    在使用Automysqlbackup备份MySQL时,有时候你会在邮件里面看见"WARNING: Turning off multicore support, since pigz isn' ...

  7. RMAN异机恢复遭遇ORA-01547、ORA-01152、ORA-01110错误案例

    测试环境:     操作系统  :  Red Hat Enterprise Linux ES release 4 (Nahant Update 4)   VMWARE     数据库     :  O ...

  8. python 常用模块之os、sys、shutil

    目录: 1.os 2.sys 3.shutil 一.os模块 说明:os模块是对操作系统进行调用的接口 os.getcwd() #获取当前工作目录,即当前python脚本工作的目录路径 os.chdi ...

  9. C#：委托和自定义事件

    1. 委托概述 “委托”相当于C++中的“函数指针”,委托必须与所要“指向”的函数在“参数”和“返回类型”上保持一致; // 定义Person类 public class Person { publi ...

  10. web应用中使用JavaMail发送邮件 。。转载

    现在很多的网站都提供有用户注册功能, 通常我们注册成功之后就会收到一封来自注册网站的邮件.邮件里面的内容可能包含了我们的注册的用户名和密码以及一个激活账户的超链接等信息.今天我们也来实现一个这样的功能 ...