评论和弹幕

<!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%;
        }

        .boxDom {
            width: 80%;
            height: 100%;
            position: relative;
            overflow: hidden;
            background: #9f9f9f;
            float: left;
        }

        .idDom {
            width: 20%;
            height: 10%;
            background: #666;
            position: fixed;
            bottom: 0px;
            left: 80%;
        }

        .content {
            display: inline-block;
            width: 460px;
            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: 200px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
        .box {
            width: 20%;
            height: 90%;
            float: right;
            background: #cc6600;
        }

        ul li {
            list-style: none;
            font-size: 16px;
            font-weight: 700;
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }
        video{
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
</head>

<body>

<div class="boxDom" id="boxDom">

    <video controls="controls" autoplay="autoplay"><source src="video/1.mp4" type="video/mp4" /></video>
    <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>
<div class="box" id="weibo">
    <ul id="ul">

    </ul>
</div>
</body>

</html>
<script>
    $('#btn').click(function () {
        var color=['cyan','yellow','orange','pink','green','red','black']
        //随机生成一个颜色的索引。
        var colorIndex=parseInt(Math.random()*color.length);
        //获取随机高度
        var randomTop=parseInt(Math.random()*600);
        //1.获取文本框的值
        // $('#text').val()
        //2.动态创建一个span，设置内容
        var $span=$('<span></span>');
        $span.appendTo($('#boxDom'));
        $span.text($('#text').val())
            .css('color',color[colorIndex])
            .css('top',randomTop).css('left',"100%")
            .animate({left:-$span.width()},5000,function(){
                $(this).remove();
            });




        if ($('#text').val().length==0){
            return;
        }
        //创建li标签添加内容，再把li标签添加到ul子节点的最前面
        $('<li></li>').text($('#text').val()).prependTo($('#ul'));
        //清空文本框的value值
        $('#text').val('');
    })
    $('#text').keyup(function (e) {
        if (e.keyCode==13){
            $('#btn').click();
        }
    })


</script>
猜你喜欢
