在别人网站中看到一个类似于弹幕的效果，闲来无事用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. Android中AsyncTask分析--你所不注意的坑

    AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI ...

  2. MS SQL专用管理员连接DAC

    在SQL SERVER 2005中,微软引入了一个叫做数据库专用管理员连接方式(DAC Dedicated Administrator Connection)的特性,使用这个新特性,数据库管理员可以在 ...

  3. iptables一次性封多个ip，使用ipset 工具

    ipset是什么? ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也 ...

  4. 深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接(转)

    1.内联接(典型的联接运算,使用像 =  或 <> 之类的比较运算符).包括相等联接和自然联接.     内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...

  5. 还来一篇说下json_value 以及 json_query 的应用 (3)

    上一篇说了一下openjson 的一些使用方法,这次再说一下在2016里面的查询取值,当然就是 json_query 和 json_value 这2兄弟了 首先 ) = '{"a" ...

  6. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  7. NGUI 指定视口大小

    由于只是给Uinty开发插件,对Unity没有系统的学习,对Unity的很多功能都不是非常了解,幸得其他Unity同事的耐心教导,才不至于想崩头.记录一下,避免重复犯错. NGUI可以建立指定视口大小 ...

  8. 【转】JVM运行原理及JVM中的Stack和Heap的实现过程

    来自: http://blog.csdn.net//u011067360/article/details/46047521 Java语言写的源程序通过Java编译器,编译成与平台无关的‘字节码程序’( ...

  9. 四极耳机接线标准，N版耳机改造为i版耳机

    (本文提到的都是3.5mm的耳机,2.5mm的没做验证) 现在的手机,以及大多数笔记本都开始使用“四极耳机”,也就是耳机上插头上有四个极.为了叙述方便,将耳机插头上的四个极从插头顶端到靠近电线的塑胶部 ...

  10. 一些工具&名词

    长期维护更新: 极光推送.个推---移动端消息推送 花生壳---外网访问内网 跳板机-堡垒机 jumpserver开源跳板机 DJANGO --- python web开发架构 Apache Shir ...