基于JavaScript实现弹幕特效


Posted in Javascript onAugust 27, 2020

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

此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教。

注意用的是jquery-2.0.3.js

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title></title> 
 </head> 
 
 <style type="text/css"> 
 *{ 
 padding: 0; 
 margin: 0; 
 } 
 .shooter{ 
 width: 600px; 
 height: 60px; 
 /*background: black;*/ 
 margin: 0 auto; 
 } 
 .shooter input{ 
 width: 300px; 
 height: 40px; 
 border: none; 
 border-radius: 7px; 
 box-shadow: 0 0 8px rgba(182,195,214,0.6)inset; 
 padding-left: 15px; 
 margin-top: 10px; 
 } 
 .shooter button{ 
 width: 80px; 
 height: 40px; 
 border: none; 
 margin-left: 10px; 
 background-color:#339B53; 
 border-radius:8px; 
 color: white; 
 cursor: pointer; 
 } 
 
 .shooter button:hover{ 
 font-size: 14px; 
 background:#008000; 
 } 
 .content{ 
 width: 100%; 
 height: 600px; 
 background: gray; 
 position: relative; 
 overflow: hidden; 
 } 
 
 .bullet{ 
 position: absolute; 
 /*right: 0;*/ 
 /*left:1600px;*/ 
 word-break: keep-all; 
 /*不让单词折行*/ 
 
 
 } 
 
 </style> 
 
 <body> 
 <div class="shooter"> 
 
 <input type="text"/> 
 <button>发射</button> 
 
 </div> 
 <div class="content"> 
 
 </div> 
 <script type="text/javascript" src="js/jquery-2.0.3.js" ></script> 
 
 <script type="text/javascript"> 
 $("button").click(function(){ 
  
 var msg = $("input").val(); 
 //取出输入框内容 
  
 if(msg.length > 15){ 
  
  alert("字数不得超过15个!"); 
  return; 
 } 
  
 var bullet = $("<div>"); 
 //生成一条弹幕 
 bullet.text(msg); 
 //将输入框内容放置到div中 
 bullet.addClass("bullet"); 
 //为bullet这个div添加样式bullet 
 bullet.css("top",Math.round(Math.random()*500)); 
 //随机设置弹幕位置 
 bullet.css("left","1600px"); 
 bullet.css("font-size",Math.round(Math.random()*60)+12+"px"); 
 bullet.css("color","rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"); 
// alert(window.getComputedStyle(bullet,null).width); 
 bullet.animate({ 
  left:-1000//此处视为bug,应该随着弹幕的长短而变化 
 },Math.round(Math.random()*9000)+1000,"linear", function(){ 
  bullet.remove(); 
  //当运动结束时,删除弹幕 
 }); 
  
 $(".content").append(bullet); 
 //将弹幕添加到屏幕中 
  
  
 }); 
 </script> 
 </body> 
</html>

下面是展示的弹幕效果(显示的白线在谷歌浏览器中是看不出来的,在录制时会看出来,此处又一bug):

基于JavaScript实现弹幕特效

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

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
js实现水平滚动菜单导航
Jul 21 #Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 #Javascript
JavaScript实现购物车基本功能
Jul 21 #Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 #Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 #jQuery
基于input框覆盖掉数字英文的实例讲解
Jul 21 #Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 #Javascript
You might like
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php实现的双色球算法示例
2017/06/20 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
Use Word to Search for Files
2007/06/15 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
机械制造毕业生求职信
2014/03/03 职场文书
主办会计岗位职责
2014/03/13 职场文书
文明倡议书范文
2014/04/15 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
四风自我剖析材料
2014/09/30 职场文书
党员民主评议个人总结
2014/10/20 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis