<a href="#">彈幕技術(shù)</a>  <div class="mask">    <a href="#" class="button">X</a>  </div>  <!-- 底部發(fā)言框前端 -->  <div class="bottom">    <input class="content"></input>    <a href="#" class="send">發(fā)表言論</a>  </div>

html,body{    background-image:url("images/208.jpg");    height:100%;//文字的顯示區(qū)域要設(shè)置好  }  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;  }

$('a.send').click(function(){      //獲取內(nèi)容，創(chuàng)建新元素，并設(shè)置位置追加到目標(biāo)元素中      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);      //移動(dòng)到最右側(cè)，直接刪除該元素      $content.animate({right:$(document.body).width()+100},8000,function(){        $(this).remove();      });    });    $('div.button').click(function(){      $('div.mask').hide(2000);    });