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

精彩的弹幕效果分享给大家，具有一定的参考价值，感兴趣的朋友可以尝试制作弹幕，具体内容如下

 

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

 

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

html代码：

?

1 2 3 4 5 6 7 8 9

<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>   </div>

css代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

html,body{     background-image:url("images/208.jpg");     height:100%;//文字的显示区域要设置好   }   div.mask{     position:fixed;     width:100%;     height:100%;     background-color:black;     opacity:0.5;     top:0px;     left:0px;   }   div.bottom{     width:100%;     height:77px;     background-color:#090909;     position:fixed;     bottom:0px;     left:0px;     text-align:center;     line-height:77px;   }   div.bottom input.content{     width:605px;     height:37px;     border:none;     border-radius:10px 0px 0px 10px;     font-size:16px;     font-family:'Microsoft Yahei';   }   div.bottom a.send{     background-color:green;     color:#fff;     display:inline-block;     width:150px;     height:40px;     line-height:37px;     text-align:center;     position:relative;     left:-10px;     top:-2px;     border-radius:0px 10px 10px 0px;     text-decoration:none;     font-family:'Microsoft Yahei';   }   div.mask a.button{     width:50px;     height:50px;     border-radius:30px;     background-color:#660000;     color:#fff;     position:fixed;     top:20px;     right:20px;     text-align:center;     line-height:50px;     font-size:30px;     font-family:'Microsoft Yahei';     border:1px solid #fff;     text-decoration:none;     cursor:pointer;   }   div.text{     color:#fff;     position:fixed;     right:0px;     font-size:20px;     white-space: nowrap;   }

jQuery代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('a.send').click(function(){       //获取内容，创建新元素，并设置位置追加到目标元素中       var val=$('input.content').val();       var $content=$('<div class="text">'+val+'</div>');       var top=Math.random()*$(document.body).height()-77;       $content.css('top',top);       $('div.mask').append($content);       //移动到最右侧，直接删除该元素       $content.animate({right:$(document.body).width()+100},8000,function(){         $(this).remove();       });     });     $('div.button').click(function(){       $('div.mask').hide(2000);     });

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