在别人网站中看到一个类似于弹幕的效果，闲来无事用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 9分钟前注册成功</li>
<li>152***92244 12分钟前注册成功</li>
<li>159***92932 15分钟前注册成功</li>
<li>139***04555 21分钟前注册成功</li>
<li>155***59509 23分钟前注册成功</li>
<li>135***93950 29分钟前注册成功</li>
<li>155***52421 29分钟前注册成功</li>
<li>132***22029 29分钟前注册成功</li>
<li>155***42959 35分钟前注册成功</li>
<li>155***09954 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 实现类似于弹幕效果的更多相关文章
-
又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
-
推荐20款基于 jQuery &; CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
-
android 弹幕效果demo
记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...
-
Android弹幕功能实现，模仿斗鱼直播的弹幕效果
转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...
-
h5做直播的弹幕效果
最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...
-
JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
-
marquee标签弹幕效果
播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...
-
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...
-
jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
随机推荐
-
ruby : nil?, empty? and blank?的选择
article = nil article.nil? # => true empty? checks if an element - like a string or an array f.e. ...
-
教程-在F9后提示内存错误，点击了乎略，之后怎么取消乎略？
问题现象:F9后,调试程序,提示内存错误,点击了“乎略”.之后再也没有出现错误了.可是想改这个BUG时,没法取消乎略了. 问题原因:在DLEPHI的选项中是这么一个地方是可以设置的. 问题处理:打开D ...
-
Java基础知识强化之网络编程笔记14：TCP之多个客户端上传到一个服务器的思考（多线程改进）
1. 多个客户端上传到一个服务器的思考 通过while循环可以改进一个服务器接收多个客户端. 但是这个是有问题的.如果是这种情况,假设我还有张三,李四,王五这三个人分别执行客户端 张三:好好学习.a ...
-
xend调用xenstore的出错揭秘
近期发现几例问题,均是xend里面报了同一个错误 File "/usr/lib64/python2.4/site-packages/xen/xend/xenstore/xstransact. ...
-
bug：记最近出现的非功能bug
1.android 4.1.2 的兼容bug 一直以为Android 测试 4 5 6就可以了,结果发现Android4.1.2 和Android4.3之间还是有差距的. 处理办法:验证版本兼容的时候 ...
-
Numpy常用概念-对象的副本和视图、向量化、广播机制
一.引言 在我们操作数组的时候,返回的是新数组还是原数组的链接,我们就需要了解对象副本和视图的区别. 向量化和广播是numpy内部实现的基础. 二.对象副本和视图 我们应该注意到,在操作数组的时候返回 ...
-
windows ip路由
windows 20082块网卡,连接远程mysql数据库一直不通,ping正常,telnet 3306端口不正常 route print 路由情况 route add 10.255.2574.XXX ...
-
Linux下查看yun rpm dpkg 软件是否安装成功的方法
因为Linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了. 总结起来就是这样几类: 一.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -q ...
-
如何在阿里云esc上安装wordpress
本人的个人网纱建好,但是由于新申请的域名还没有备案 所以暂时无法通过域名访问. 1.按顺序边看边跟着做基本上你能够很优雅的完成大部分设置. http://bbs.aliyun.com/read/162 ...
-
(转)sdd for aix 安装及基本命令
总结出自多个文件(自己做的项目和网上找的资料) 原文:http://blog.csdn.net/yujin2010good/article/details/11395701 一.sddpcm安装 要安 ...