来个弹幕吧！

我的第一个小特效哦

写每一个效果前都得先构思，先有个大概布局，再开始埋头苦敲，这样才能快速解决问题。。。
1、写弹幕时最好把所有的弹幕都放在“幕布”上，而不是直接放在内容上；
2、获取随机字体颜色、随机大小

//获取随机RGB值
function randomColor(){
    return "rgba("+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ",1)";            
 }
//获取14-30随机数
function runRandom(){
    return Math.floor( Math.random()*17 ) + 14;
}

3、布局

<div id="box">
    <img src="img/op.jpg"/>
    <div id="list">
        <p id="p1"></p>
    </div>
    <div id="bottom">
        <input type="text" id="text" placeholder="请输入弹幕" />
        <span id="btn">提交</span>
        <a id="close" href="javascript:;">隐藏弹幕</a>
    </div>
</div>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    #box{
        width: 900px;
        height: 700px;
        border: 2px solid yellowgreen;
        position: relative;
        margin:100px auto;
    }
    #box img{
        width: 900px;
        height: 700px;
        z-index: -1;
    }
    #bottom{
        width: 440px;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left:-220px;
        font-family: "微软雅黑";
        font-size: 14px;
        display: none;
    }
    #text{
        width: 300px;
        height: 30px;
        border:2px solid #FF0000;
        float: left;
    }
    #btn{
        display: block;
        float: left;
        width: 50px;
        height: 32px;
        color:#fff;
        cursor: pointer;
        text-align: center;
        line-height: 32px;
        background: #FF0000;
        border:1px solid #FF0000;
    }
    a{
        text-decoration: none;
        text-align: center;
        display: block;
        float: right;
        background: #FF0000;
        line-height: 32px;
        width: 80px;
        height: 32px;
        color:#fff;
        border:1px solid #FF0000;
    }
    #list{
        width: 100%;
        height: 300px;
        position: absolute;
        top:0;
        left: 0;
        overflow: hidden;
    }
    p{
        color:#FF0000;
        position: absolute;
        top: 0;
        right:-304px;
    }
</style>

4、js代码段

var box = document.getElementById("box");
var list = document.getElementById("list");
var p1 = document.getElementById("p1");
var Text = document.getElementById("text");
var btn = document.getElementById("btn");
var close = document.getElementById("close");
var bottom = document.getElementById("bottom");
box.onmouseover = function(){
    bottom.style.display = 'block';
};
box.onmouseout = function(){
    bottom.style.display = 'none';
};          
//点击回车发送弹幕
Text.onfocus = function(){
    document.onkeydown = function(ev){
        ev = ev || event;
        if( ev.keyCode == 13 ){
            fn();
        }
    }           
}
//点击按钮发送弹幕
btn.onclick = fn;
//弹幕移动
function fn(){
    var val = Text.value;
    var op = document.createElement('p');
    op.innerHTML =  val ;
    list.appendChild( op );
    op.style.marginTop = Math.floor( Math.random()*200 ) + 'px';
    op.style.color = randomColor();
    op.style.fontSize = ( Math.floor( Math.random()*20) +10 ) + 'px' ;
    op.style.whiteSpace = 'nowrap';
    op.num = 880;
    var left = op.offsetLeft;
    var timer = setInterval(function(){
        op.num --;
        if( op.offsetLeft <= -op.offsetWidth ){
            clearInterval( timer );
            list.removeChild( op );
        }
        op.style.left = op.num + 'px';
    },runRandom());     
    Text.value = '';
}
//获取随机RGB值
function randomColor(){
    return "rgba("+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ",1)";     
 }
//获取14-30随机数
function runRandom(){
    return Math.floor( Math.random()*17 ) + 14;
}
//隐藏弹幕  显示弹幕
close.onclick = function(){
    if(close.onOff){
        close.innerHTML = '显示弹幕';
        list.style.display = 'none';
    }else{
        close.innerHTML = '隐藏弹幕';
        list.style.display = 'block';
    }
        close.onOff = !close.onOff;
}

5、效果图；

Paste_Image.png