jQuery案例学习【发送弹幕】

最新推荐文章于 2023-03-24 06:42:06 发布

迟到_啦

最新推荐文章于 2023-03-24 06:42:06 发布

阅读量270

点赞数

分类专栏：前端学习版块文章标签： jquery html5 css 弹幕案例 js

本文链接：https://blog.csdn.net/qq_19314763/article/details/111523838

版权

前端学习版块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、效果演示
二、代码
三、注意事项
四、参考知识

一、效果演示

在这里插入图片描述

二、代码

1、html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./弹幕.css">
    <!--<script src="./jquery-3.5.1.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>弹幕案例</title>
</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" placeholder="请输入弹幕"/>
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
</body>

</html>

2、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: 50px;
    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;
    vertical-align: middle;
}
.text {
    border: none;
    width: 300px;
    height: 40px;
    border-radius: 5px;
    font-size: 2.4em;
}
.btn {
    width: 60px;
    height: 40px;
    background: #f90000;
    border: none;
    color: #fff;
    font-size: 2.4em;
    line-height: 40px;
    border-radius: 3px;
}
span {
    width: 300px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    color: #000;
    font-size: 4em;
    line-height: 1.5em;
    cursor: pointer;
    white-space: nowrap;
}

3、jQuery代码

<script>
    //页面加载函数
    $(function(){
        //给回车按钮添加点击事件
        $("#text").keyup(function(e){
            if(e.keyCode == 13){
                send();
            }
        });
        //给发射按钮添加点击事件
        $("#btn").click(function(){
            send();
        });
    })

    //发送弹幕
    function send(){
        //获取当前网页宽高,确定弹幕初始left值与生成弹幕的高度区间
        var page_width = window.document.body.offsetWidth;
        var page_height = window.document.body.offsetHeight;

        
        //声明一个颜色数组
        var colors = ['pink','red','green','orange','black','blue','#660000','#9966CC','#FF9900','#0099CC','#CC3366','#999933'];

        //生生一个随机的颜色下标
        var randomColorIndex = parseInt(Math.random() * colors.length);
        
        //生成随机top值（相当于在距离屏幕顶部距离60%范围内添加弹幕）
        var randomY = parseFloat(Math.random() * page_height * 0.6)

        //使用链式编程生成一个span标签
        console.log(parseInt(Math.random() * colors.length))
        console.log(colors[randomColorIndex])
        var span = $("<span></span>")
            //设置span内容(text和html方法均可)
            .text($("#text").val())
            //设置span字体颜色
            .css('color',colors[randomColorIndex])
            //设置span距离顶部的距离
            .css('top',randomY)
            //设置span最开始距离屏幕左侧的距离
            .css('left',page_width)
            //设置span标签的自定义动画效果： 耗时15s时间 距离左侧位置变为-100px 匀速运动 回调函数-运动到-100px时自动移除该元素
            .animate({left:'-100px'}
                ,15000,'linear'
                ,function(){
                    $(this).remove()
                }
            )
        
        //将span标签添加到到boxDom中展示
        $("#boxDom").append(span);

        //清空输入框内容
        $("#text").val("")
    }

</script>

4、完整代码

4.1 弹幕.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./弹幕.css">
    <!--<script src="./jquery-3.5.1.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>弹幕案例</title>
</head>
<script>
    //页面加载函数
    $(function(){
        //给回车按钮添加点击事件
        $("#text").keyup(function(e){
            if(e.keyCode == 13){
                send();
            }
        });
        //给发射按钮添加点击事件
        $("#btn").click(function(){
            send();
        });
    })

    //发送弹幕
    function send(){
        //获取当前网页宽高,确定弹幕初始left值与生成弹幕的高度区间
        var page_width = window.document.body.offsetWidth;
        var page_height = window.document.body.offsetHeight;

        
        //声明一个颜色数组
        var colors = ['pink','red','green','orange','black','blue','#660000','#9966CC','#FF9900','#0099CC','#CC3366','#999933'];

        //生生一个随机的颜色下标
        var randomColorIndex = parseInt(Math.random() * colors.length);
        
        //生成随机top值（相当于在距离屏幕顶部距离60%范围内添加弹幕）
        var randomY = parseFloat(Math.random() * page_height * 0.6)

        //使用链式编程生成一个span标签
        console.log(parseInt(Math.random() * colors.length))
        console.log(colors[randomColorIndex])
        var span = $("<span></span>")
            //设置span内容(text和html方法均可)
            .text($("#text").val())
            //设置span字体颜色
            .css('color',colors[randomColorIndex])
            //设置span距离顶部的距离
            .css('top',randomY)
            //设置span最开始距离屏幕左侧的距离
            .css('left',page_width)
            //设置span标签的自定义动画效果： 耗时15s时间 距离左侧位置变为-100px 匀速运动 回调函数-运动到-100px时自动移除该元素
            .animate({left:'-100px'}
                ,15000,'linear'
                ,function(){
                    $(this).remove()
                }
            )
        
        //将span标签添加到到boxDom中展示
        $("#boxDom").append(span);

        //清空输入框内容
        $("#text").val("")
    }

</script>

<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" placeholder="请输入弹幕"/>
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>
</body>

</html>

4.2 弹幕.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: 50px;
    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;
    vertical-align: middle;
}
.text {
    border: none;
    width: 300px;
    height: 40px;
    border-radius: 5px;
    font-size: 2.4em;
}
.btn {
    width: 60px;
    height: 40px;
    background: #f90000;
    border: none;
    color: #fff;
    font-size: 2.4em;
    line-height: 40px;
    border-radius: 3px;
}
span {
    width: 300px;
    height: 40px;
    position: absolute;
    overflow: hidden;
    color: #000;
    font-size: 4em;
    line-height: 1.5em;
    cursor: pointer;
    white-space: nowrap;
}

三、注意事项

回车键和发送按钮均可以发送弹幕
jquery样式采用网络引入的形式
弹幕.html和弹幕.css文件需要在同级目录下，否则需要更改html中引入的样式路径

四、参考知识

js得到屏幕宽高、页面宽高

迟到_啦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery案例学习【发送弹幕】

这里写目录标题一、效果演示二、代码1、html代码2、css代码3、jQuery代码4、完整代码4.1 弹幕.html文件4.2 弹幕.css文件三、注意事项四、参考知识一、效果演示二、代码1、html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫