<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>弹幕</title>
<style type="text/css">
*{ margin:0; padding:0}
#tm{ margin:0 auto; height:400px; width:600px;position:relative; overflow:hidden}
#tm div{ height:20px;line-height:20px; position:absolute; width:100%}
#btn{ margin:0 auto; width:300px; height:20px;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)};
window.onload=function(){
var timer=null;
var newarr=[];
$("submit").onclick=function(){
clearInterval(timer);
var text=$("text").value;
var newnode=document.createElement("div");
newnode.innerHTML=text;
newnode.style.top=Math.random()*($("tm").offsetWidth-20)+"px";
newnode.style.left="600px";
console.log("'"+randomColor()+"'")
newnode.style.color="#"+randomColor();
$("tm").appendChild(newnode);
timer=setInterval(move,20);
}
function move(){
var arr=$("tm").getElementsByTagName("div");
for(var i=0;i<arr.length;i++){
newarr.push(arr[i].offsetLeft);
arr[i].style.left=newarr[i]+"px";
newarr[i]--
if(newarr[i]<0){
newarr[i]=600;
}
}
//console.log(j);
}
function randomColor() {
var color = Math.ceil(Math.random( ) * 16777215).toString(16);
while(color.length<6){
color="0"+color;
}
return color;
}
}
</script>
</head>

<body>
<div id="tm"></div>
<div id="btn">
<input type="text" value="" id="text"/>
<input type="button" id="submit" value="发表"/>
</div>
</body>
</html>

js 弹幕效果的更多相关文章

  1. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  2. js实现弹幕效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  4. marquee标签弹幕效果

    播放个视频的时候看到很有趣的弹幕,想着前端能不能做个弹幕效果.弹幕是滚动的,所以首先想到了<marquee>标签.但事实上,<marquee>标签不是w3c的标准,只是主流的浏 ...

  5. 又一枚精彩的弹幕效果jQuery实现

    精彩的弹幕效果分享给大家,具有一定的参考价值,感兴趣的朋友可以尝试制作弹幕,具体内容如下   简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失.   涉及知识点:val().random ...

  6. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

  7. android 弹幕效果demo

    记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战.而弹幕则无疑是直播功能当中最 ...

  8. js sleep效果

    js sleep效果 s = setInterval(function(){ //需要执行的函数 alert("我延迟了2秒弹出"); },2000); 并不是每2秒执行一次,而是 ...

  9. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. 金融事业部QA培训体系

    此文已由作者夏君授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 引言     总结2015,放眼2016,纵观整个互联网圈,人才依然是业务成功的第一要素,在网易,我想也是这样 ...

  2. 洛谷 P1081 开车旅行【双向链表+倍增】

    倍增数组的20和N写反了反复WAWAWA-- 注意到a和b在每个点上出发都会到一个指定的点,所以这样构成了两棵以n点为根的树 假设我们建出了这两棵树,对于第一问就可以枚举起点然后倍增的找出ab路径长度 ...

  3. bzoj 2229: [Zjoi2011]最小割【Gomory–Hu tree最小割树】

    这个算法详见http://www.cnblogs.com/lokiii/p/8191573.html 求出两两之间最小割之后暴力统计即可 #include<iostream> #inclu ...

  4. bzoj 3205: [Apio2013]机器人【dfs+斯坦纳树+spfa】

    第一次听说斯坦纳树这种东西 先dfs预处理出来dis[i][j][k]表示格子(i,j)向k方向转移能到哪,记忆话搜索预处理,注意如果有环的话特判一下 设f[i][j][x][y]表示复合机器人i-j ...

  5. 51nod 1119 机器人走方格 V2 【组合数学】

    挺水的但是我好久没写组合数了- 用这样一个思想,在1~m列中,考虑每一列上升几格,相当于把n-1个苹果放进m个篮子里,可以为空,问有几种方案. 这个就是一个组合数学经典问题了,考虑n个苹果放进m个篮子 ...

  6. 4800: [Ceoi2015]Ice Hockey World Championship(折半搜索)

    4800: [Ceoi2015]Ice Hockey World Championship Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 622  S ...

  7. java多线程模拟龟兔赛跑

    让乌龟和兔子在同一个赛道从1开始跑到100,看看谁更快. public class Racer implements Runnable{ private static String winner;// ...

  8. Luogu P1134 阶乘问题 【数学/乱搞】 By cellur925

    输入输出格式 输入格式: 仅一行包含一个正整数 NN . 输出格式: 一个整数,表示最右边的非零位的值. 输入输出样例 输入样例#1: 12 输出样例#1: 6 说明 USACO Training S ...

  9. Luogu P2920 时间管理【二分答案】

    二分答案水题. (像我这么蒻的人都能十几分钟A掉) https://www.luogu.org/problemnew/show/P2920 开始时间一定在从0到min(t[i]-s[i])的一段区间上 ...

  10. Flutter开发移动端APP的入门教程及简单介绍

    Dart&Flutter环境搭建 安装 dart SDK 如果只开发移动应用,那么您不需要Dart SDK; 只需安装Flutter. 这里就直接安装 Flutter (dart SDK已经集 ...