【文件属性】：
文件名称：弹幕效果制作弹幕效果制作
文件大小：4KB
文件格式：HTML
更新时间：2022-04-19 14:10:54
jQ HTML CSS
用JQ制作的弹幕效果.
$(function(){
var colors = ["red","pink","blue","purple","green","yellow"]
$("#btn").click(function(){
//拿到用户输入的弹幕内容
//发射出去 创建一个节点 把内容放进来 插入到div里面
//高度随机 颜色随机 animate动画
var randomColor = parseInt(Math.random()*colors.length)
var randomY = parseInt(Math.random()*400)
// console.log(randomColor) 已经从数组里面随机拿到数组的下标
//创建span标签
$("").text($("#text").val())
.css("color",colors[randomColor])
.css("top",randomY)
.css("left",1600)
.animate({left:-500},10000,"linear",function(){
//到达了终点 回调函数
$(this).remove();
})
.appendTo("#boxDom")
$("#text").val("")
})
//回车发射
$("#text").keyup(function(e){
if(e.keyCode == 13){
$("#btn").click();
}
})
})