jquery 实现类似于弹幕效果
在别人网站中看到一个类似于弹幕的效果，闲来无事用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字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
随机推荐
- 长链接转换成短链接（iOS版本）
首先需要将字符串使用md5加密,添加NSString的md5的类别方法如下 .h文件 #import <CommonCrypto/CommonDigest.h> @interface NS ...
- UIImageView
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. /***** ...
- [转]HDFS中JAVA API的使用
HDFS是一个分布式文件系统,既然是文件系统,就可以对其文件进行操作,比如说新建文件.删除文件.读取文件内容等操作.下面记录一下使用JAVA API对HDFS中的文件进行操作的过程. 对分HDFS中的 ...
- ORACLE字符集基础知识
概念描叙 ORACLE数据库有国家字符集(national character set)与数据库字符集(database character set)之分.两者都是在创建数据库时需要设置的.国家 ...
- Linux rm删除大批量文件
在使用rm删除大批量文件时,有可能会遭遇"参数列太长"(Argument list too long)的问题.如下所示 [oracle@DB-Server bdump]$ rm - ...
- Unable to determine if the owner (Domain\UserName) of job JOB_NAME has server access
早上巡检的的时候,发现一数据库的作业报如下错误(作业名等敏感信息已经替换),该作业的OWNER为一个域账号: JOB RUN: 'JOB_NAME' was run on 2016-6-1 at 7: ...
- java强引用、软引用、弱引用、虚引用
前言概述 在JDK1.2以前的版本中,当一个对象不被任何变量引用,那么程序就无法再使用这个对象.这就像在日常生活中,从商店购买了某样物品后,如果有用,就一直保留它,否则就把它扔到垃圾箱,由清洁工人收走 ...
- 从一个url输入浏览器到页面渲染出来，这个过程都发生了哪些事情？
经典问题:在浏览器输入一个url后,会发生什么事情呢? (1)假设是简单的http请求(GET),IPV4,无代理. 浏览器先查看浏览器缓存-系统缓存-路由器缓存,若缓存中有,请略过中间步骤,直接跳到 ...
- 程序员的修养 -- 如何写日志(logging)
在程序中写日志是一件非常重要,但是很容易被开发人员忽视的地方.写好程序的日志可以帮助我们大大减轻后期维护压力. 在实际的工作中,开发人员往往迫于的巨大时间压力,而写日志又是一个非常繁琐的事情,往往 ...
- 爬虫（Java实现）
说明: 使用了htmlparser库. 运行过程: 从某个网址开始,摘取网页中的链接,并通过广度搜索,对这些链接递归执行上述操作. 在以上过程中把网址存入数据库中.以防止搜索中出现环路. 但是,程序经 ...