又一枚精彩的弹幕效果jQuery实现

简易弹幕效果：将发布的内容随机显示在弹幕右侧，逐渐左移最后消失。

涉及知识点：val()、random()、height()、css()、append()、remove()等，主要是元素的操作

超文本标记语言代码：

a href='# '弹幕技术/a div class=' mask ' a href=' # ' class=' button ' x/a/div！-底部发言框前端-div class=' bottom ' input class=' content '/input a href=' # ' class=' send '发表言论/a /divcss代码：

html，正文{ background-image : URL(' images/208。jpg’)；高度：100%;//文字的显示区域要设置好} div。掩模{位置：固定；宽度：100%;高度：100%;背景-颜色：黑色；opa city 33600.5 top :0 pxleft :0 px } div。底部{宽度：100%；高度：77 px背景色： # 090909;位置：固定；bottom:0pxleft:0px文本对齐：居中；线高：77 px} div。底部输入。内容{ width :605 px高度：37 pxborder : none border-radius :10 px 0px 0px 10px；font-size :16 px字体系列： '微软雅黑；} div.bottom a.send{背景-颜色：绿色；color: # fffdisplay :内嵌块；宽度宽度：150像素高度：40 px线高：37 px文本对齐：居中；位置：相对；左侧：-10px；top :-2px；边框半径：0 px 10px 10px 0 px文本装饰：无；字体系列： '微软雅黑；} div。屏蔽a . button { width :50 px高度：50 px边界半径：30像素；背景色： # 660000;color: # fff位置：固定；top:20pxright:20px文本对齐：居中；线高：50 pxfont-size :30 px字体系列： '微软雅黑；border:1px实心# fff文本装饰：无；光标：指针指针；} div.text { color: # fff位置：固定；right :0 px font-size :20 px；空白： nowrap}jQuery代码：

$(“发送”).单击(函数(){ //获取内容，创建新元素，并设置位置追加到目标元素中var val=$('input.content ').val()；var $ content=$(' div class=' text ' ' val '/div ')；var top=数学。random()* $(文档。身体).高度()-77;$content.css('top '，top)；$(“div . mask”).追加($ content)；//移动到最右侧，直接删除该元素$内容。动画({ right : $(document。正文).width() 100}，8000，function(){ $(this).移除();});});$('div.button ').单击(function(){ $('div.mask ').隐藏(2000年);});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。