本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下
此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教。
注意用的是jquery-2.0.3.js
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> & lt;/title>
& lt;/head>
& lt;风格类型=" text/css "比;
* {
填充:0;
保证金:0;
}
.shooter {
宽度:600 px;
高度:60 px;/*背景:黑色;*/保证金:0汽车;
}
.shooter输入{
宽度:300 px;
高度:40像素;
边界:没有;
border - radius: 7 px;
不必:0 0 8 px rgba(182195214, 0.6)插图;
padding-left: 15 px;
margin-top: 10 px;
}
.shooter按钮{
宽度:80 px;
高度:40像素;
边界:没有;
margin-left: 10 px;
background - color: # 339 b53;
border - radius: 8 px;
颜色:白色;
光标:指针;
}
.shooter按钮:{徘徊
字体大小:14 px;
背景:# 008000;
}
.content {
宽度:100%;
身高:600 px;
背景:灰色;
位置:相对;
溢出:隐藏;
}
.bullet {
位置:绝对的;/*右:0;*//*左:1600 px; */单词分割:将所有;/*不让单词折行*/}
& lt;/style>
& lt; body>
& lt; div类=吧浠鳌北?
& lt;输入类型=拔谋尽?比;
& lt; button>发射& lt;/button>
& lt;/div>
& lt; div类=澳谌荨北?
& lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-2.0.3.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$("按钮").click(函数(){
var味精=$(“输入”).val ();//取出输入框内容
如果(味精。长度比;15){
alert("字数不得超过15个!”);
返回;
}
var子弹=$ (“& lt; div>”);//生成一条弹幕
bullet.text(味精);//将输入框内容放置到div中
bullet.addClass(“子弹”);//为子弹这个div添加样式子弹
bullet.css(“顶级”,Math.round (math . random () * 500));//随机设置弹幕位置
bullet.css(“左”,“1600 px”);
bullet.css(“字体大小”,Math.round (math . random () * 60) + 12 +“px”);
bullet.css(“颜色”、“rgb (“+ Math.round (math . random () * 255) +”、“+ Math.round (math . random () * 255) +”、“+ Math.round (math . random () * 255) + ") ");//警报(window.getComputedStyle(子弹,null) .width);
bullet.animate ({
左:-1000//此处视为错误,应该随着弹幕的长短而变化
},Math.round (math . random() * 9000) + 1000,“线性”,函数(){
bullet.remove ();//当运动结束时,删除弹幕
});
$ (" .content ") .append(子弹);//将弹幕添加到屏幕中
});
& lt;/script>
& lt;/body>
& lt;/html>
,下面是展示的弹幕效果(显示的白线在谷歌浏览器中是看不出来的,在录制时会看出来,此处又一错误):
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
