Higanbana

一个简易弹幕

发表于 |

这是一个用jquery写的弹幕，下面是一点心得。
编写jquery的要点在于以下几个方面：
1.获取随机高度和随机颜色
2.绑定点击和回车事件
3.获取输入内容并以动画形式添加到窗口
下面贴出完整代码，一些细节都会提到

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹幕</title>
<style type="text/css">
    body{
        background-color: gainsboro;
    }
    .main{
        margin:auto;
        background-color:rgba(71,71,71,0.95);
        height: 500px;
        width: 60%;
    }
    .screen{
        background-color: antiquewhite;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 90%;
        position: relative;
        overflow: hidden;     /*overflow: hidden对screen外的部分进行裁剪，弹幕内容只出现在screen中*/
    }
    .input{
        margin-left: 17%;
        margin-top: 10px;
        padding-left: 2%;
        width: 50%;
        height: 30px;
        border-radius: 10px 0 0 10px;
        border: none;
    }
    .button{
        position: relative;
        top:-32px;
        padding: 0;
        margin-left: 69%;
        height: 32px;
        width: 10%;
        border-radius: 0 10px 10px 0;
        background-color: rgba(80,188,50,0.95);
        border: none;
        color: white;
    }
    .button:hover{
        background-color: rgba(66,156,42,0.95);
        cursor: pointer;
    }
    #spa{
        position: absolute; /*在JS中定义top,right要建立在 position: absolute基础上*/
        width: 200px;    /*设置弹幕的宽度*/
        right: -200px;   /*弹幕从screen边界右边200px处开始，与宽度相等，当大于宽度时会延迟到来时间，小于时会从screen内部开始*/
    }

</style>
</head>
<body>
  <div class="main">
     <div class="screen">
     </div>
     <div class="foot">
       <input id="in" class="input" type="text" placeholder="说点什么...">
       <button id="btn" class="button" type="button">发送</button>
     </div>
  </div>
</body>
<script language="javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="JavaScript">
var screenW=parseInt($(".screen").width());     //获取screen窗口的宽度
var screenH=parseInt($(".screen").height());    //获取screen窗口的高度


$("#btn").bind("click",auto);                    //bind("e".function)此处function只能写函数名auto,不能写auto()
document.onkeydown=function (e) {               //绑定点击和回车
    if (e.keyCode == 13){
        auto();                                    //此处需写auto()
    }
}

function auto() {
    var inp = $("#in").val();                      //val()获取input或hidden或摁键对象的值
    $("#in").val("");                              //val("")给input或hidden或摁键对象赋一个空值,只使用input或hidden对象，起清空作用
    var newspan = $("<span id='spa'></span>");     //此处设置类或ID方便在CSS文件中进行设置
    newspan.text(inp);
    var top = parseInt(screenH*(Math.random()));          //获取随机高度
    newspan.css({"color":getRandomColor(),"top":top});    //设置随机颜色和高度
    $(".screen").append(newspan);                         //将输入内容添加到screen
    newspan.animate({"right":screenW+200},10000,"linear",function(){
        $(this).remove();                          //左移screenW+200px的动画效果，此处200与前面对应，执行完毕后内容移除
    });

}


function getRandomColor(){                        //获取随机颜色
    return '#' + (function(h){
            return new Array(7 - h.length).join("0") + h
        })((Math.random() * 0x1000000 << 0).toString(16));
}
</script>

</html>