在别人网站中看到一个类似于弹幕的效果，闲来无事用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. IOS开发基础知识--碎片46

    1:带中文的URL处理 // http://static.tripbe.com/videofiles/视频/我的自拍视频.mp4 NSString *path = (__bridge_transfer ...

  2. (一)Maven初步了解与认识

    Apache Maven是一个软件项目管理的综合工具.基于项目对象模型(POM)的概念,提供了帮助管理构建.文档.报告.依赖.发布等方法,Maven简化和标准化项目建设过程.处理编译,分配,文档,团队 ...

  3. [Unity游戏开发]向量在游戏开发中的应用（二）

    本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/50972976 在上一篇博客中讲了利用向量方向的性质来解决问题.这篇博客将继 ...

  4. MVC3.0----整理之一

    1.ViewBag对象是动态解析对象 @{ ViewBag.Title = "Insert"; } 不仅可以把单个的对象绑定到 ViewBag上,还可以直接绑定List ViewB ...

  5. ARM汇编与C混合编程

    GNU内联汇编 内联汇编即在C中直接使用汇编语句进行编程,使程序可以在C程序中实现C语言不能完成的一些工作,例如,在下面几种情况中必须使用内联汇编或嵌入型汇编 程序中使用饱和算术运算(Saturati ...

  6. redis 基础

    一 redis数据类型redis支持5种类型的数据类型,它描述如下的:1. 字符串 Redis字符串是字节序列.Redis字符串是二进制安全的,这意味着他们有一个已知的长度没有任何特殊字符终止,所以你 ...

  7. [django]django+post+ajax+highcharts使用方法

    直接代码展示: view.py文件代码 from django.http import JsonResponse #django ajax部分 def ajax_kchart(request): ti ...

  8. Counting Bits -leetcode

    introduction: Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num  ...

  9. hdu-5992 Finding Hotels(kd-tree)

    题目链接: Finding Hotels Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 102400/102400 K (Java/ ...

  10. codevs1022 覆盖[Hungary 二分图最大匹配]

    codevs1022 覆盖 有一个N×M的单位方格中,其中有些方格是水塘,其他方格是陆地.如果要用1×2的矩阵区覆盖(覆盖过程不容许有任何部分重叠)这个陆地,那么最多可以覆盖多少陆地面积. 输入描述  ...