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字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
随机推荐
- Android系统的五种数据存储形式（二）
之前介绍了Android系统下三种数据存储形式,今天补充介绍另外两种,分别是内容提供者和网络存储.有些人可能认为内存提供者和网络存储更偏向于对数据的操作而不是数据的存储,但这两种方式确实与数据有关,所 ...
- 判断用户输入的银行卡号是否正确--基于Luhn算法的格式校验
开发中,有时候,为了打造更好的用户体验,同时减轻服务器端的压力,需要对于一些如,手机号码,银行卡号,身份证号码进行格式校验 下面是判断银行卡号输入是否正确的代码(基于Luhn算法的格式校验): iOS ...
- JNI笔记1
一.什么是JNI Java Native Interface(JNI)是Java语言的本地编程接口 是 Java 与操作系统本地代码互相调用的功能的接口 二.Java 调用C/C++步骤: 1.在Ja ...
- 常用API——日期型函数Date
上图 ·声明 var myDate = new Date(); //系统当前时间 var myDate = new Date(yyyy, mm, dd, hh, mm, ss); var myDate ...
- 欢迎进入MyKTV点歌系统展示
一个项目,一分收获:一个项目,一些资源.Ktv项目也是一样的,所以我想分享我的收获,让你们获得你需要的资源. 一. 那MyKTV点歌系统具体的功能有哪些呢?我们就来看看吧! 1.MyKTV前台功能: ...
- SQL Server修改数据库对象所有者(Owner)浅析
在SQL Server数据库中如何修改数据库对象(表.视图.存储过程..)的所有者(Owner)呢?一般我们可以使用系统提供的系统存储过程sp_changeobjectowner来修改. 我们先看看s ...
- ORA-00600: internal error code, arguments: [kcratr1_lastbwr], [], [], [], [], [], [], []
今天在PlateSpin Forge(关于PlateSpin相关介绍,请见最下面部分简单介绍) 复制出来的一台数据库服务器上,测试数据库能否正常启动时,遇到了"ORA-00600: inte ...
- IP 地址分类（A、B、C、D、E类)
互联网上的接口的唯一地址. IP 32位的地址通常表示为四个10进制的数,每个证书对应一个字节,成为点分十进制法(Dotted decimal notation) 如上图首字节整数:A类--0开始,B ...
- [bootstrap]bootstrap2如何引导div垂直居中
参考网址:http://www.4byte.cn/question/138712/bootstrap-how-to-center-vertical.html 部分参考自上面网页中的方法.用过boots ...
- 敏捷BI比传统BI功能强大是否属实？
关于大数据的资讯铺天盖地而来,让人眼花缭乱.虽然资讯很精彩,我们也看到了大数据背后的价值,很多企业选择了商业智能BI产品.商业智能在使用上可分为敏捷BI与传统BI,从名字来看敏捷BI要比传统BI显得利 ...