基于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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
基于javascript实现放大镜特效
Dec 03 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
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
在django view中给form传入参数的例子
2019/07/19 Python
python实现简单银行管理系统
2019/10/25 Python
利用python实现AR教程
2019/11/20 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
小学英语教学反思
2014/01/30 职场文书
党支部承诺书范文
2014/03/28 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
初婚初育证明范本
2015/06/18 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js