原生js实现弹幕效果


Posted in Javascript onNovember 29, 2020

本文实例为大家分享了js实现弹幕效果的具体代码,供大家参考,具体内容如下

效果展示:

原生js实现弹幕效果

源码展示:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>原生js实现弹幕效果</title>
  <style>
    * {
      padding:0;
      margin:0;
    }
    .all {
      width:600px;
      height:400px;
      background:#000000;
    }
    /*.danmu {*/
      /*width:600px;*/
      /*height:500px;*/
      /*background:#000000;*/
      /*overflow:hidden;*/
      /*z-index:50;*/
    /*}*/
  </style>
</head>
<body>
<div class="all">
 
</div>
<input type="text" class="texts" value="这是一个弹幕。。。">
<button>发送</button>
 
<script>
  var all = document.querySelector('.all');
  var danmu = document.querySelector('.danmu');
  var buttons = document.querySelector('button');
  var texts = document.querySelector('.texts');
  console.log(texts.value);
  buttons.onclick = function() {
    var p = document.createElement('p');
    p.style.position = 'absolute';
    p.innerHTML = texts.value;
    p.style.left = 600 + 'px';
    p.style.color = 'white';
    p.style.zIndex = 100;
    p.style.top = Math.random() * 490 + 'px';
    all.appendChild(p);
    var x = setInterval(function() {
      p.style.left = parseInt(p.style.left) - 10 + 'px';
      if ((parseInt(p.style.left) + 600) <= 0) {
        all.removeChild(p);
        clearInterval(x);
      }
 
    }, 100)
 
  }
</script>
<pre style="color:red">
 感: 最近贡献一下我在教学中的小案例 希望能给你一些帮助 ,希望大家继续关注我的博客
 
                                        --王
</pre>
</body>
</html>

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

Javascript 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
js 监控iframe URL的变化实例代码
Jul 12 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Node.js 的 GC 机制详解
Jun 03 Javascript
JS实现简单日历特效
Jan 03 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 Javascript
javascript实现点击小图显示大图
Nov 29 #Javascript
js实现简易点击切换显示或隐藏
Nov 29 #Javascript
webpack4从0搭建组件库的实现
Nov 29 #Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 #Javascript
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
You might like
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
php文件操作实例代码
2012/05/10 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
详解python内置模块urllib
2020/09/09 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
住宅质量保证书
2014/04/29 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
你会写请假条吗?
2019/06/26 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL