又一枚精彩的弹幕效果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);      });

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