文件名称:弹幕效果制作弹幕效果制作
文件大小: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(); } }) })