Another wonderful play-screen effect jquery implemented

Wonderful play-screen effect to share to everyone, with a certain reference value, interested friends can try to make the bomb screen, the specific content as follows

Simple barrage effect: Randomly display the published content on the right side of the barrage, moving left and finally disappearing.

Involves knowledge points: Val (), Random (), height (), CSS (), append (), remove (), and so on, mainly the manipulation of elements

HTML code:

?

123456789

<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 code:

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970

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 Code:

?

123456789101112131415

$(‘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);    });

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support the script home.

Another wonderful play-screen effect jquery implemented