jquery弹幕

最新推荐文章于 2022-04-23 11:22:24 发布

梅志贤

最新推荐文章于 2022-04-23 11:22:24 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/weixin_44389021/article/details/87728285

版权



<!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: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            float: left;
        }
        .liao{
            width: 300px;
            height: 70%;
            position: absolute;
            top:0px;
            right: 0px;
            border:1px solid red;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .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: 300px;
            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;
        }
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }

    </style>
</head>

<body>

<div class="boxDom" id="boxDom">
    <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 class="liao">
        <ul>

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

</body>

<script src="js/jquery-1.12.4.js"></script>
<script>
    function rc(){
        return parseInt(Math.random()*256);
    }
    function to(){
        return parseInt(Math.random()*800);
    }
    $("#btn").click(function () {
        var val=$("#text").val();
        if (val.trim().length>0) {
            $("<span></span>").text(val).appendTo("#boxDom")
                .css("color","rgb("+rc()+","+rc()+","+rc()+")")
                .css("top",to()+"px")
                .css("left","1920px")
                .animate({left:0},5000,"linear",function(){
                    $(this).remove();
                });
            $("ul").append("<li>"+$("#text").val()+"</li>");
            $("#text").val("");
        }
    })
    $(document).keydown(function (e) {
        if (e.keyCode==13){
            $("#btn").click();
        }
    })
</script>
</html>

梅志贤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery弹幕

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; html, body {
复制链接

扫一扫

jquery弹幕

“相关推荐”对你有帮助么？