JavaScript实现弹幕效果
效果如下
<html>
<head>
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head> <body>
<div class="container">
<div>
<h4>在这里输入弹幕</h4>
<input id ="danmu" type="" name="">
<button>发射</button>
</div>
<div class="show">
<div id="start"></div>
</div>
</div>
<script type="text/javascript">
var dammuNum = 0;
function create(msg){
dammuNum++;
$('#start').append("<div id=\""+dammuNum+"\">"+msg+"</div>");
var top = Math.ceil(Math.random()*50);
fun(dammuNum,900,top);
}
function fun(cla,n,top){
if(n>0){
n--; $("#"+cla).css({left:+n+"px",position:"absolute",top:""+top+"0px"});
setTimeout(fun,10,cla,n);
}if(n==0){
$("#"+cla).remove();
}
} $("button").click(function(){
create($("#danmu").val());
});
</script>
</body>
</html>
JavaScript实现弹幕效果的更多相关文章
- JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
- 又一枚精彩的弹幕效果jQuery实现
精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下 简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- android 弹幕效果demo
记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...
- JavaScript之放大镜效果2
在放大图片效果的同时,我们怎么原图和放大窗体增加间隔呢? 我们只需应用一个table就行了: 源码上: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
- JavaScript之放大镜效果
在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...
- Android 自定义View修炼-自定义弹幕效果View
一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...
- Android:简单的弹幕效果达到
首先,效果图.分类似至360检测到的骚扰电话页面: 布局非常easy,上面是一个RelativeLayout,以下一个Button. 功能: (1)弹幕生成后自己主动从右側往左側滚动(Translat ...
随机推荐
- python并发编程之进程2(管道,事件,信号量,进程池)
管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...
- POJ:2109-Power of Cryptography(关于double的误差)
Power of Cryptography Time Limit: 1000MS Memory Limit: 30000K Description Current work in cryptograp ...
- SmartGit 30天评估期结束解决办法
smartgit 需要输入序列号解决办法: 1.找到路径: %APPDATA%\syntevo\SmartGit\<main-smartgit-version> 然后删除: setting ...
- POJ1719二分匹配
第一次发文,就是一些学习的心得而已,自己忘得时候就可以来看看,好了废话不多说,直接说说这题的思路. 题意大概是每列只能射中一个白格子,每行可以射多个,让你输出这样的序列,明显的二分图求匹配,用列去选行 ...
- WPF触控程序开发(二)——整理的一些问题
上一篇(WPF触控程序开发)介绍了几个比较不错的资源,比较基础.等到自己真正使用它们时,问题就来了,现把我遇到的几个问题罗列下,大家如有遇到其他问题或者有什么好的方法还望赐教. 问题1.如何获取触控点 ...
- golang连接orcale
使用glang有一段时间了,最开始其实并不太喜欢他的语法,但是后来熟悉之后发现用起来还挺爽的.之前数据库一直使用mysql,连接起来没有什么问题,github上有很多完善的驱动,所以以为连接其他数据库 ...
- BZOJ 5442: [Ceoi2018]Global warming
[l,r]+x不如[l,n]+x [l,r]-x不如(r,n)+x 所以等价于只有[l,n]+x 枚举断点树状数组合并 难度在于想到这个贪心 #include<cstdio> #inclu ...
- Tarjan算法及其应用
Tarjan算法及其应用 引入 tarjan算法可以在图上求解LCA,强连通分量,双联通分量(点双,边双),割点,割边,等各种问题. 这里简单整理一下tarjan算法的几个应用. LCA http:/ ...
- Flowerpot(单调队列)
描述 Farmer John has been having trouble making his plants grow, and needs your help to water them pro ...
- springboot集成shiro——登陆记住我
在shiro配置类中增加两个方法: com.resthour.config.shrio.ShiroConfiguration /** * cookie管理对象 * @return */ @Bean p ...