jquery版的网页弹幕

最新推荐文章于 2024-05-19 09:35:12 发布

终端鹿

最新推荐文章于 2024-05-19 09:35:12 发布

阅读量182

点赞数

分类专栏： web 文章标签： jQuery 网页弹幕 JavaScript 基础教程动态效果

本文链接：https://blog.csdn.net/qq_41949807/article/details/111292770

版权

web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

jquery版的网页弹幕

一个乞丐版的jquery网页弹幕吐槽送给大家，这个适合刚开始接触JavaScript和jquery的同学，可以帮大家更好的去理解一些基础知识

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

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

        .content {
            display: inline-block;
            width: 430px;
            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 {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
    </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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
    $("#btn").click(function () {
        var colors = ["blue","yellow","red","pink","green","black","gray","orange","darkorange"];
        var randomColor = colors[Math.round(Math.random()* colors.length)];
        var randomTop = Math.round(Math.random()* 500);

        // $("#boxDom").append('');
        $("<span></span>").text($("#text").val()).css("color",randomColor).css("top",randomTop).css("left","1400px").animate({left:"-=1700px"},5000,function () {
            $(this).remove();
        }).appendTo($("#boxDom"));
        $("#text").val("");
    });
    $("#text").keyup(function (ev) {
        if (ev.keyCode === 13){
            //一单触发回车   将btn的click事件执行
            // $("#btn").trigger("click");
            $("#btn").click();
        }
    });
});
</script>
</html>

效果图如下：
在这里插入图片描述

终端鹿

关注

0
点赞
踩
2

收藏

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

jquery版的网页弹幕一个乞丐版的jquery网页弹幕吐槽送给大家，这个适合刚开始接触JavaScript和jquery的同学，可以帮大家更好的去理解一些基础知识<!doctype html><html><head> <meta charset="utf-8"> <title>乞丐版网页弹幕</title> <style type="text/css"> html, body
复制链接

扫一扫

专栏目录