<!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. E20180224-hm-xa

    separator n. 分离器,分离装置; 防胀器; colon n. 冒号; <解>结肠; 科郎(哥斯达黎加货币单位); semicolon  n. 分号;

  2. P3158 [CQOI2011]放棋子

    传送门 题解(因为公式太多懒得自己抄写一遍了--) //minamoto #include<bits/stdc++.h> #define ll long long #define R re ...

  3. Win7下安装MongoDB4.0.10

    前言 MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什 ...

  4. 【转载】WebConfigurationManager和ConfigurationManager

    原文链接 今天在写程序时偶然发现有的示例代码中是用WebConfigurationManager获取web.config中的配置信息的,因为之前一直都是用的ConfigurationManager,所 ...

  5. rest_framework基于generics.CreateAPIView创建用户

    最近在写新版的devops3.0,被generics.CreateAPIView创建用户密码序列化的问题折磨的欲仙欲死.反复看源码测试,得出下面的流程,这也是做generics.CreateAPIVi ...

  6. GridView 中绑定DropDownList ,下拉框默认选中Label的值

    在GridView中,我们 有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-Horiz ...

  7. Android学习笔记（十四） Handler理论补充

    一.如何下载Android源码 在SDK Manager中选中Sources for Android SDK. 二.ThreadLocal初步介绍 1)执行ThreadLocal对象(static f ...

  8. 【译】x86程序员手册41-10.6 TLB（快表）测试

    译注:本章基本未做翻译 10.6 TLB Testing TLB测试 The 80386 provides a mechanism for testing the Translation Lookas ...

  9. Ubuntu Linux14 64位下在Android studio下用gradle编译Andrid项目时发生libz.so.1共享库找不到的解决方法。

    ---恢复内容开始--- 我在Ubuntu14 64为下安装了AS,但在用Gradle编译项目时总是报找不到 libz.so.1的错误. error while loading shared libr ...

  10. ALTER FUNCTION - 修改一个函数的定义

    SYNOPSIS ALTER FUNCTION name ( [ type [, ...] ] ) RENAME TO newname DESCRIPTION 描述 ALTER FUNCTION 修改 ...