模仿弹幕效果 | 易学教程

最近公司在做直播，需要一个弹幕效果，就是那种飞来飞去的，所以写了一个，有借鉴别人的部分，望见谅，希望对大家有帮助

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>弹幕</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .container{
            width:100%;
            height:100%;
            background-color: #f2f2f2;
        }
        .barrageBtn{
            position: absolute;
            bottom:0px;
            padding: 5px 0px;
            height: 50px;
            width:100%;
            background-color: #f3f3f3;
        }
        .words{
            width: 60%;
            float: left;
            height:35px;
            padding: 5px;
            margin-top: 5px;
            border: 1px solid #000;
            border-radius: 5px;
            outline: none;
            margin-left: 5px;
        }
        .btn{
            float: left;
            width:120px;
            height: 37px;
            margin-left: 15px;
            border-radius: 5px;
            background-color: #C34040;
            margin-top: 5px;
            text-align: center;
            line-height: 37px;
            color: #fff;
            font-size: 23px;
            cursor: pointer;
        }
        .barrageConatiner{
            width:100%;
            height:40%;
        }
        .message{
            width:auto;
            height: 30px;
            position: absolute;
            overflow: hidden;
            color:#000;
            font-size: 20px;
            line-height: 20px;
            cursor: pointer;
            white-space:nowrap;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="barrageConatiner"></div>
    <div class="barrageBtn">
        <input type="text" class="words" placeholder="请在这里输入要说的话~~">
        <a class="btn">飞屏</a>
    </div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
    $(function(){
        var color = ["#F70404","#04F70B","#0492F7","#F304F7","#F70431","#DD04F7","#7804F7"];
        var containerW = parseInt($(document).width());
        var containerH = parseInt($(".barrageConatiner").height());
        
        $(".btn").bind("click",addBarrage);
        
        function addBarrage(){
            var word = $(".words").val();
            
            var marginTop = parseInt(containerH*(Math.random()));
            var num = parseInt(color.length*(Math.random()));
            
            var barrageSpan = '<span class="message" style="top:'+marginTop+';right:0;color:'+color[num]+'">'+word+'</span>';
           
            $(".words").val("");
            $(".barrageConatiner").append(barrageSpan);
            var barrageSpan = $(".barrageConatiner span:last-child");
            var speedArr = [10000,8000,5000];
            var speed = speedArr[parseInt(speedArr.length*(Math.random()))];
            barrageSpan.stop().animate({"right":containerW+200},speed,"linear",function(){
                        $(this).remove();
                    });
        }
        document.onkeydown = function(e){
            if(e.keyCode == 13){
                addBarrage();
            }
        }
   });
</script>
</body>
</html>

今天又加了一个有表情的代码和普通的弹幕差不多就是用来一个 jquery.qqFace.js 主要代码如下

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>弹幕</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .container{
            width:100%;
            height:100%;
            background-color: #f2f2f2;
        }
        .barrageBtn{
            position: absolute;
            bottom:0px;
            padding: 5px 0px;
            height: 50px;
            width:100%;
            background-color: #f3f3f3;
        }
        .wordContainer{
            width: 60%;
            float: left;
            border: 1px solid #000;
            border-radius: 5px;
            height:35px;
        }
        #words{
            width:80%;
            height:35px;
            border:none;
            outline: none;
            margin-left: 5px;
        }
        .emotion{
            float: right;
            line-height: 35px; 
            font-size: 18px;
            margin-right: 5px;
            color: #DD04F7;
            cursor: pointer;
        }
        .btn{
            float: left;
            width:120px;
            height: 37px;
            margin-left: 15px;
            border-radius: 5px;
            background-color: #C34040;
            text-align: center;
            line-height: 37px;
            color: #fff;
            font-size: 23px;
            cursor: pointer;
        }
        .barrageConatiner{
            width:100%;
            height:40%;
        }
        .message{
            width:auto;
            height: 30px;
            position: absolute;
            overflow: hidden;
            color:#000;
            font-size: 20px;
            line-height: 30px;
            cursor: pointer;
            white-space:nowrap;

        }
        .message img{
            vertical-align:middle;
        }
        #facebox{
            bottom: 60px !important;
            top:auto !important;
            right:40% !important;
            left:auto !important;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="barrageConatiner">
        <!-- <span class="message" style="top:10px;">hhhhh<img src="arclist/14.gif" border="0" /></span> -->
    </div>
    <div class="barrageBtn">
        <div class="wordContainer">
            <input type="text" id="words" placeholder="请在这里输入要说的话~~">
            <a class="emotion">表情</a>
        </div>
        
        <a class="btn">飞屏</a>
    </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.qqFace.js"></script>
<script>
    $(function(){
        var color = ["#F70404","#04F70B","#0492F7","#F304F7","#F70431","#DD04F7","#7804F7"];
        var containerW = parseInt($(document).width());
        var containerH = parseInt($(".barrageConatiner").height());
        
        $(".btn").bind("click",addBarrage);
        
        function addBarrage(){
            var word = $("#words").val();
            if(word.indexOf("[em_") !=-1){
                var reg = /\[([^\]]+)\]/g;
                value = replace_em(word);
                console.log(value)
            }
            
            var marginTop = parseInt(containerH*(Math.random()));
            var num = parseInt(color.length*(Math.random()));
            
            var barrageSpan = '<span class="message" style="top:'+marginTop+';right:0;color:'+color[num]+'">'+value+'</span>';
           
            $("#words").val("");
            $(".barrageConatiner").append(barrageSpan);
            var barrageSpan = $(".barrageConatiner span:last-child");
            var speedArr = [10000,8000,5000];
            var speed = speedArr[parseInt(speedArr.length*(Math.random()))];
            barrageSpan.stop().animate({"right":containerW+200},speed,"linear",function(){
                        $(this).remove();
                    });
        }
        function replace_em(str){

            str = str.replace(/\</g,'&lt;');
            str = str.replace(/\>/g,'&gt;');
            str = str.replace(/\n/g,'<br/>');
            str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');
            return str;

        }
        document.onkeydown = function(e){
            if(e.keyCode == 13){
                addBarrage();
            }
        }
        $('.emotion').qqFace({

            id : 'facebox', 
            assign:'words', 
            path:'arclist/'    //表情存放的路径

        });
   });
</script>
</body>
</html>

效果如下

来源：http://www.cnblogs.com/wangwei-exits/p/6290460.html

标签

border-radius

message

var

parseint