在别人网站中看到一个类似于弹幕的效果，闲来无事用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 手机卫士--对话初次设置密码验证过程

    本文实现设置密码对话框的逻辑判断 本文地址:http://www.cnblogs.com/wuyudong/p/5940551.html,转载请注明出处. 首先添加上图按钮的监听事件代码 /** * ...

  2. Android自定义控件7--自定义开关--绘制界面内容

    本文实现全自定义控件--自定义开关 本文地址:http://www.cnblogs.com/wuyudong/p/5922316.html,转载请注明源地址. 自定义开关 (View),本文完成下面内 ...

  3. IOS开发基础知识--碎片14

    1:ZIP文件压缩跟解压,使用ZipArchive 创建/添加一个zip包 ZipArchive* zipFile = [[ZipArchive alloc] init]; //次数得zipfilen ...

  4. [Java编程思想-学习笔记]第3章 操作符

    3.1  更简单的打印语句 学习编程语言的通许遇到的第一个程序无非打印"Hello, world"了,然而在Java中要写成 System.out.println("He ...

  5. 1、软件工程师要阅读的书籍 - IT软件人员书籍系列文章

    软件工程师要阅读的书籍估计是项目组内最多的.软件工程师处于项目组中最基础的人员储备阶层,与项目的关系最密切.当然,现在是大数据时代,我们无法全部看完所有相关的书籍,只能够先学习工作需要的知识,然后在项 ...

  6. web.xml is missing and <failOnMissingWebXml> is set to true 错误解决办法

    对web项目的解决方案: 右击项目——>Java EE Tools——>Generate Deployment Descriptor Stub. 然后系统会在src/main/webapp ...

  7. 从零自学Hadoop(08)：第一个MapReduce

    阅读目录 序 数据准备 wordcount Yarn 新建MapReduce 示例下载 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是 ...

  8. 从零自学Hadoop(11)：Hadoop命令上

    阅读目录 序 概述 Hadoop Common Commands User Commands Administration Commands File System Shell 引用 系列索引 本文版 ...

  9. C# DESC加密

    DESC加密方法 直接上代码: 1.加密 /// <summary> /// 加密 /// </summary> /// <param name="obj&qu ...

  10. Eclipse Kelper 设置代理服务器无效解决方案

    Open Network Connection Settings. Select Active Provider to "Manual". Set HTTP/HTTPS proxy ...