您当前的位置:个人博客

【转载】Jquery 实现弹幕效果


博主: neuhxy   2017-11-12 08:45

转载一篇Jquery实现的弹幕效果,

演示效果:

/static/upload/article/danmu_201604171006113203.html

HTML代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
  html,body{
  margin:0px;
  padding:0px;
  width: 100%;
  height:100%;
  font-family: "微软雅黑";
  font-size: 62.5%;
  background: #ccc;
}
  .boxDom {
    width:100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .idDom {
    width: 100%;
    height: 60px;
    background: #666;
    position: fixed;
    bottom: 0px;
  }
  .content {
    display: inline-block;
    width:430px;
    height: 40px;
    position: absolute;
    left: 0px;
    right: 0px;
    top:0px;
    bottom:0px;
    margin:auto;
  }
  .title {
    display: inline;
    font-size: 4em;
    vertical-align:bottom;
    color:#fff;
  }
  .text {
    border:none;
    width:300px;
    height: 30px;
    border-radius: 5px;
    font-size: 2.4em;
  }
  .btn {
    width:60px;
    height: 30px;
    background: #f90000;
    border:none;
    color:#fff;
    font-size: 2.4em;
  }
  .string {
    width:300px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    color:#000;
    font-size: 4em;
    line-height: 1.5em;
    cursor: pointer;
    white-space:nowrap;
  }
</style>
</head>

<body>
<div class="boxDom" id="boxDom">
  <div class="idDom" id="idDom">
    <div class="content">
      <p class="title">吐槽:</p>
      <input type="text" class="text" id="text" />
      <button type="button" class="btn" id="btn">发射</button>
    </div>
  </div>
</div>
</body>
<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript">
   $(function(){
    var pageW=parseInt($(document).width());
    var pageH=parseInt($(document).height());
    var boxDom=$("#boxDom");
    var btnDom=$("#btn");
    var Top,Right;
    var width;
    width=pageW;
    var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
     btnDom.bind("click",auto);
    document.onkeydown=function(e){
      if(e.keyCode == 13){
        auto();
      }
    }
    function auto(){
      var creSpan=$("<span class='string'></span>");
      var text=$("#text").val();
      creSpan.text(text);
      $("#text").val("");
      Top=parseInt(pageH*(Math.random()));
      var num=parseInt(colorArr.length*(Math.random()));
      if(Top>pageH-90){
        Top=pageH-90;
      }
      creSpan.css({"top":Top,"right":-300,"color":getRandomColor()});
      boxDom.append(creSpan);
      var spanDom=$("#boxDom>span:last-child");
      spanDom.stop().animate({"right":pageW+300},10000,"linear",function(){
            $(this).remove();
          });
    }
    function getRandomColor(){
      return '#' + (function(h){
        return new Array(7 - h.length).join("0") + h
      })((Math.random() * 0x1000000 << 0).toString(16));
    }
   });
</script>
</html>

 

评论请先 登录