jQuery弹幕效果的简单实现

写弹幕案例的时候，首先要知道每一步该怎么做。先设置好帧后，发送弹幕时要做好以下步骤：

获取要发送到弹幕的内容，即获取文本框中输入的内容。varstr=$(“#文本框标识”)。val()通过jquery生成一个元素：使用jQuery的var createSpan=$(" ")生成一个Span元素进行发送。为新创建的跨度指定一个值，即获取的文本框中的值create span . text(str)；设置元素的动画效果，即元素移动。使用jQuery的animate(css样式值、时间、执行动画后调用的方法)。执行动画后，手动移除刚刚添加的元素。里面有很多细节。如果你仔细看，你会有所收获！

！DOCTYPE html html heartheta charset=' utf-8 '/title弹幕案例/title脚本src=' http://libs。百度。com/jquery/1。10 .2/jquery。量滴js '/script script $(function(){ var BoxDoM=$(' # BoxDoM ')；//var DOM内容=$(' # DOM内容')；定义变量顶部，右侧；var pageWidth=parseInt($(文档)。width())；var pageHeight=parseInt($(文档)。高度());//点击按钮$('#btn ').绑定('点击，自动);//按钮绑定方法//按下回车文件。onkeydown=function(){ if(event。键码==13){ auto()；} }函数auto(){ //1 .获取输入的字符串var str=$(' .文本')。val()；//2.生成一个元素var CreateSpan=$(' span class=' string '/span ')；//3.给生成的元素赋值createSpan.text(字符串);//为了页面友好，清空刚刚输入的值$('.文本')。val(" ")；//生成元素一个随机的位置，为了使每条弹幕都出现在屏幕上不同的位置top=数学。地板(数学。random()*页面高度)；createSpan.css({'top':top，' right': -400，' color ' : getRandomColor()})；BoxDom。追加(创建平移)；//4.设置元素的动画效果，动画(css样式值，时间，执行完动画调用的方法) //页面上有普通个跨度，只让最后一个动起来var span DOM=$(' # Boxmodspan : last-child ')；//找到最后一个跨度跨度DOM。animate({ ' right ' :页面宽度300 }，10000，function(){ //移除元素$(这个)。移除();});} //定义一个可以生成随机颜色的方法，可以使每条弹幕的颜色不同函数getRandomColor(){ var colorar=[' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，' A '，' B '，' C '，' D '，' E '，' F ']；var color=for(var I=0；i6；I){ color=color[math。地板(数学。random()* 16)]；}返回"#"颜色；} });/script style type=' text/CSS ' html，body { margin : 0pxpadding : 0px宽度： 100%;高度： 100%;字体系列： '微软雅黑；背景# ccc}。BoxDom { width : 100%；高度： 100%;相对位置：飞越：隐藏；} .idDom { width : 100%；高度： 60px背景技术： # 666;位置：固定；bottom: 0px}。contet { width: 500px高度： 40px绝对位置：top : 0pxright : 0pxbottom : 0pxleft : 0pxmargin 3360 auto }。title { display : inline font-size : 24px；垂直对齐： 底部；color: # ffffff左填充left: 300px}。文本{ width : 300 px h8 : 30pxborder 3360 one border-radius :5 px；font-size : 20px左边距left:60px}。BTN { width : 60px h8 : 30pxcolor : # ffffff背景-颜色：红色；border : none font-size :16 px；左边距左侧：60像素边距-top : 20px；} .字符串{宽度： 300像素高度： 40px边距-top : 20px；绝对位置：color : # 000 font-size : 20px；字体系列： '微软雅黑；}/style/head dydiv class=' BoxDoM ' id=' BoxDoM ' img src=' http :/images/BG _ 2。jpg ' style=' width :100%；高度：100% '/div id=' idDoM ' class=' idDoM ' div class=' content ' p class=' title '说点什么：/p输入类型='text' class='text'/button类型='button' class='btn' id='btn '发送/button/div/div/body/html效果图如下：

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