jQuery实现的弹幕效果完整实例

本文实例讲述了jQuery实现的弹幕效果。分享给大家供大家参考，具体如下：

看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。

先来看看运行效果：

下面将整个代码显示出来：

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题www。jb51。网弹幕/titlestyle type='text/css' html，body { background: # efefef高度：100%;} .母丹{横向： 100像素；高度：30 px线高： 28px背景：绿色；边界半径： 5pxborder:1px实心# fffcolor: # fffoutline:无；} div。掩模{位置：固定；宽度：100%;高度：100%;background:rgba(0，0，0，0.8)；opa city 33600.5 top :0 pxleft :0 px } div。底部{宽度：100%；高度：77 px背景：线性梯度(#ccc，# 4a 4a)；位置：固定；bottom:0pxleft:0px文本对齐：居中；线高：77 px} div。底部输入。内容{宽度：50%；最小宽度： 200像素；高度：37 pxborder : none border-radius :10 px 0px 0px 10px；font-size :16 pxpadd :0 10pxoutline : none } div . bottom a . send {背景-颜色：绿色；color: # fffdisplay :内嵌块；宽度宽度：100像素高度：38 px线高：37 px文本对齐：居中；位置：相对；左侧：-10px；top :2 pxborder-radius :0 px 10px 10px 0 px；文本装饰：无；字体系列： '微软雅黑；} div。屏蔽a . button { width :30 px高度：30 px边界半径：50%;背景-颜色：绿色；color: # fff位置：固定；top:20pxright:20px文本对齐：居中；线高：30 pxfont-size :20 px字体系列： '微软雅黑；border:1px实心# fff文本装饰：无；光标：指针指针；} div.text { color: # fff位置：固定；right :0 px font-size :20 px；空白： nowrap}/style/head dybutton class='母丹'弹幕技术/button div class=' mask ' a href=' # ' rel=' external nofollow ' rel=' external nofollow ' class=' button ' x/a/div！-底部发言框前端-div class=' bottom ' input class=' content '/input a href=' # ' rel=' external no follow ' rel=' external no follow ' class=' send '发表言论/a /div脚本类型=' text/JAVAScript ' src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js /脚本脚本$('a.send ').单击(function(){ var val=$(').内容')。val()；var content=$(' div class=' text ' ' val '/div ')；var top=数学。random()* $(文档。身体).高度()40 ' pxcontent.css('top '，top)；$('.面具')。追加（内容);内容。动画({ right : $(document。正文).width() 100}，8000，function(){ $(this).移除();}) });$('.按钮')。单击(function(){ $('div.mask ').淡出(500)；});$('.母丹')。单击(function(){ $('div.mask ').法丁(500);});/脚本/正文/html更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。