模仿弹幕效果

时间：2017-01-16 18:25:28 阅读：257 评论：0 收藏：0 [点我收藏+]

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

<!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>

模仿弹幕效果

原文：http://www.cnblogs.com/wangwei-exits/p/6290460.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)