基于Java脚本语言实现弹幕特效

本文实例为大家分享了射流研究…实现弹幕特效的具体代码，供大家参考，具体内容如下

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

注意用的是jquery-2.0.3.js

！DOCTYPE html html head meta charset=' utf-8 '/title/title/head style type=' text/CSS ' * { padd : 0；保证金： 0；} .射手{宽度： 600像素高度： 60px/*background:黑色；*/margin : 0 auto；} .射手输入{宽度： 300像素高度： 40pxborder:无；边界半径： 7pxbox-shadow: 0 0 8px rgba(182，195，214，0.6)插图；左衬垫left : 15pxmargin-top : 10px；} .射手按钮{ width: 80px高度： 40pxborder:无；左边距left: 10px背景色-: # 339 B53；边界半径：8 px颜色：白色；光标：指针；} .射手按钮：悬停{ font-size : 14px背景技术： # 008000;} .内容{宽度： 100%；高度： 600像素；背景：灰色；相对位置：飞越：隐藏；} .项目符号{位置：绝对值；/*右： 0；*//*左：1600 px*/word-break :保留所有；/*不让单词折行*/}/style body div class=' shotter '输入类型='text'/按钮发射/button/div class=' content '/div script type=' text/JavaScript ' src=' http : js/jquery-2。0 .3 .js '/script脚本类型=' text/JavaScript ' $(' button ').单击(函数(){ var msg=$('input ')).val()；//取出输入框内容if(msg.length 15){ alert('字数不得超过15个!');返回；} var bullet=$(' div ')；//生成一条弹幕子弹。文本(msg)；//将输入框内容放置到差异中子弹。addCLaSS('项目符号')；//为子弹这个差异添加样式bullet bullet.css('top '，数学。圆(数学。random()* 500))；//随机设置弹幕位置bullet.css('left '，' 1600 px ')；bullet.css('font-size '，数学。圆(数学。random()* 60)12 ' px ')；bullet.css('color ')，' RGB(' Math . round(math . random()* 255)'，' math。圆(数学。random()* 255)'，' math。圆(数学。random()* 255)')'))；//alert(窗口。getcomputedstyle(项目符号，null ).宽度);子弹。动画({左：-1000//此处视为臭虫，应该随着弹幕的长短而变化}，数学。圆(数学。random()* 9000)1000，“线性”，函数(){ bullet。移除()；//当运动结束时，删除弹幕});$('.内容')。追加（项目符号);//将弹幕添加到屏幕中});/脚本/正文/html下面是展示的弹幕效果（显示的白线在谷歌浏览器中是看不出来的，在录制时会看出来，此处又一bug):

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。