在别人网站中看到一个类似于弹幕的效果，闲来无事用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. 错误提示，解决方案java.lang.UnsatisfiedLinkError: Couldn't load easemobservice from loader dalvik.system.PathClassLoad

    解决方案: 在libs下面创建一个armeabi-v7a文件夹 把armeabi *.so的文件复制一份 放在armeabi-v7a运行测试通过 关于 armeabi和armeabi-v7a 区别如下 ...

  2. CoreData的一些简单运用

    1.首先创建一个新的工程 记得勾选下面的 Use Core Data 万恶分割线———————————————————————— 然后点击Add Entity 创建一个类似于表名. 万恶分割线———— ...

  3. android 内存溢出与内存泄露

    内存溢出就是软件运行需要的内存,超出了java虚拟机给他分配的可用的最大内存 内存泄露就是在缓存图片文字等等的时候,没有关闭流所导致的内存泄露

  4. IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章

    十年前,笔者还是一个刚毕业的大学生,对IT业只是停留在学校的编程知识领域.刚出社会,有很多需要学习的地方.在这十年间,笔者经历了程序员,技术经理,项目经理,部门经理等职位.本文就是要说说如何从程序员到 ...

  5. 我对uml类图关系的理解

    uml类图的关系: 泛化关系也就是继承. 实现关系就是一个类实现另外一个接口. 依赖关系就是一个类使用了另外一个类,是一种使用关系,在这个类的某个服务中需要另外一个类来协助. 关联关系就是一类拥有另外 ...

  6. 图像柔光效果（SoftGlow）的原理及其实现。

    图像柔光效果在很多商业软件中都有实现,比如美图秀秀,光影魔术手等.其能针对原始图像产生一副新的比较平滑感觉光线比较柔和的效果,给人一种朦胧美,如下面几幅图所示:                     ...

  7. WinCE项目应用汇总

    虚拟仪器(VI) RM905a+医用放射性核素活度计 RM905a+活度计远程检定方法研究 车载导航

  8. BZOJ1798: [Ahoi2009]Seq 维护序列seq[线段树]

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 5504  Solved: 1937[Submit ...

  9. Android与Struts2简单json通信

    具体要求是: 服务器端得到客户端传递来的数据,并返回给客户端一条json格式的字符串 闲话不多说,直接上代码 首先是服务器端代码:建立一个web工程,导入struts2和json的jar包,并在web ...

  10. print输出格式总结

    妈的,今天又被printf坑了一回...看来需要一次性总结书所有结果,省的又出现这样那样的麻烦.. #include<stdio.h> #include<string.h> # ...