弹幕案例

来源：互联网发布：数字签名软件编辑：程序博客网时间：2024/04/29 06:00
样式    <style>        html, body {            margin: 0;            padding: 0;            width: 100%;            height: 100%;            font-size: 62.5%;        }        .boxDom {            width: 100%;            height: 100%;            position: relative;            overflow: hidden;        }        .idDom {            width: 100%;            height: 24%;            background: #666;            position: fixed;            bottom: 0px;        }        .content {            width: 430px;            height: 40px;            display: inline-block;            position: absolute;            top: 0px;            left: 0px;            bottom: 0px;            right: 0px;            margin: auto;            z-index: 100;        }        .title {            display: inline;            font-size: 4em;        }        span {            position: absolute;            font-size: 20px;            width: 500px;            color: Magenta;        }    </style><script src="js/jquery-3.2.1.js"></script>  //引入jQuery库    <script>        $(function () {               $('.btn').click(function () {                   var randomY = Math.random()*400;                   $('<span></span>').text($('.text').val())                           .css({                               left:1370,                               color:'green',                               top:randomY                           })                           .animate({left:-500},30000,function () {                               $(this).remove();                           })                           .appendTo('.boxDom');                    $('.text').val('');               });            $('.text').keydown(function (ev){                if(ev.keyCode == 13){                    $('.btn').click();                }            })        });    </script>        //html部分<body><div class="boxDom">    <div class="idDom" id="idDom">        <div class="content">            <p class="title">吐槽：</p>            <input type="text" id="text" class="text" autofocus/>            <input type="button" id="btn" class="btn" value="发布"/>        </div>    </div></div></body>
阅读全文
0 0