简单实现JavaScript弹幕效果


Posted in Javascript onAugust 27, 2020

不知大家有没有感受到,弹幕又是另一出好戏!!

不过我个人还是比较排斥看电视的时候被出来的弹幕打扰。今天我们来写一个简单的弹幕。简单到什么程度呢?看下效果:

简单实现JavaScript弹幕效果

由图可以看出,我们的呆毛html结构确实是非常简单啦。
就是由一个div、一个input框另加一个button组成。

<div id="box" class="box"></div>
 <input type="text" id="txt" />
 <button onclick="send()">提交内容</button>

先po上js代码:

function $(str) {
 return document.getElementById(str);
 }
 function send() {
 var word = $('txt').value;
 var span = document.createElement('span');
 var top = parseInt(Math.random() * 500) - 20;
 var color1 = parseInt(Math.random() * 256);
 var color2 = parseInt(Math.random() * 256);
 var color3 = parseInt(Math.random() * 256);
 var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
 top = top < 0 ? 0 : top;
 span.style.position = 'absolute';
 span.style.top = top + "px";
 span.style.color = color;
 span.style.left = '500px';
 span.style.whiteSpace = 'nowrap';
 var nub = (Math.random() * 10) + 1;
 span.setAttribute('speed', nub);
 span.speed = nub;
 span.innerHTML = word;
 $('box').appendChild(span);
 $('txt').value = "";
 }
 setInterval(move, 200);
 function move() {
 var spanArray = $('box').children;
 for (var i = 0; i < spanArray.length; i++) {
  spanArray[i].style.left =
  parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
 }
 }

原理简单说下:

第一步,我们要拿到input框里面的内容,var word = $('txt').value;
第二步,我们就要把这个内容想方设法地塞到要滚动显示的div里面去了,原则有三:①颜色随机②高度随机③与左边框的距离实时变化;
第三步,把这个内容追加到div里  $('box').appendChild(span);

由上述步骤原理可以看出,第二步是最关键的一步,

实现第一个原则:

var color1 = parseInt(Math.random() * 256);
 var color2 = parseInt(Math.random() * 256);
 var color3 = parseInt(Math.random() * 256);
 var color = "rgb(" + color1 + "," + color2 + "," + color3 + ")";
 span.style.color = color;

小扩展:

RGB(R,G,B);
R:
红色值。正整数 | 百分数
G:
绿色值。正整数 | 百分数
B:
蓝色值。正整数 | 百分数
这样就应该是很容易理解了。

实现第二个原则:

var top = parseInt(Math.random() * 500) - 20;
top = top < 0 ? 0 : top;
span.style.top = top + "px";

实现第三个原则:

span.style.left = '500px';
 setInterval(move, 200);
 function move() {
 var spanArray = $('box').children;
 for (var i = 0; i < spanArray.length; i++) {
  spanArray[i].style.left =
  parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px';
 }
 }

就是利用了定时器的原理,让left的值实时变化。

讲到这里,就应该很清晰明了了吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
详解webpack打包vue时提取css
May 26 #Javascript
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
Angular2 之 路由与导航详细介绍
May 26 #Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 #Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 #Javascript
You might like
日本十大惊悚动漫
2020/03/04 日漫
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
php实现用户登陆简单实例
2017/04/04 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python映射列表实例分析
2015/01/26 Python
Django视图和URL配置详解
2018/01/31 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
小学教研工作制度
2014/01/15 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
毕业生找工作求职信
2014/08/05 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
Python基本数据类型之字符串str
2021/07/21 Python