弹幕效果实现 jQuery

最新推荐文章于 2024-04-16 09:35:27 发布

kaolagirl

最新推荐文章于 2024-04-16 09:35:27 发布

阅读量272

点赞数 1

分类专栏：笔记 html+css+js 文章标签： html css jquery

本文链接：https://blog.csdn.net/kaolagirl/article/details/105468931

版权

html+css+js 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

笔记

6 篇文章 0 订阅

订阅专栏

效果图

弹幕效果图

主要实现功能：

点击弹幕按钮，开启弹幕编辑框
编辑好文本，点击发送按钮，文本就显示在弹幕框中

运用到的知识

Math.random( ) 随机获取
parseInt( ) 可解析字符串，并返回一个整数
append( ) 添加元素
animate({ },1000) 设置自定义动画
overflow: hidden 文本超出的部分隐藏
white-space:nowrap 文本不换行

代码如下：

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的弹幕效果</title>
    <link rel="stylesheet" href="css/tanmu.css">
</head>
<body>
    <!--弹幕框-->
    <div class="box"></div>
    <!--编辑内容-->
    <div class="banner">
        <div class="mark">
            <input class="content" type="text">
            <button class="btn">提交</button>
        </div>
    </div>
    <!--开启弹幕-->
    <div class="header">
        <div class="angle">
            <div class="radius"></div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/tanmu.js"></script>
</body>
</html>

css文件

html,body{
    background:url(../images/beijing.jpg);
    height:100%;
}
*{
    margin:0px;
    padding:0px;
}
.header{
  position:absolute;
  top:50px;
  left:50px;
}
.header .angle{
    position:relative;
    width:60px;
    height:30px;
    background-color:rgba(41, 40, 40, 0.5);
    border:1px solid #ddd;
    border-radius:20px;;
}
.header .radius{
    position:absolute;
    top:1px;
    left:1px;
    width:25px;
    height:25px;
    background-color:#eee;
    border:1px solid #ddd;
    border-radius:50%;

}
/*弹幕编辑区*/
.banner{
    display:none;
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:80px;
    background-color:rgb(29, 27, 27);
}
.banner .mark{
    width:580px;
    height:35px;
    margin:25px auto;
}
.banner .content{
    float:left;
    width:500px;
    height:35px;
    border-radius:10px 0px 0px 10px;
    outline:none;
    border:none;
    text-align:center;
}
.banner .btn{
    float:left;
    width:80px;
    height:35px;
    border-radius:0px 10px 10px 0px;
    border:none;
    outline:none;
    background:green;
}
/*文本效果*/
span{
    position:absolute;
    width:300px;
    height:40px;
    font-size:18px;
    color:#000;
    overflow:hidden;/*超出的部分隐藏*/
    white-space: nowrap;/*文本不换行*/
}

js文件

$(".header .radius").click(function(){
    $(this).animate({
        marginLeft:28
    },1000)
    $(".banner").show();  //开启弹幕编辑框
})
$(".banner .btn").click(function(){
    var colors=["red","pink","green","yellow","gray","blue","black"];
    var randomY=parseInt(Math.random()*500);//随机获取span的高度（parseInt函数把字符串解析成数字，使用parseInt方法，可以返回一个整数）
    var randomColor=parseInt(Math.random()*colors.length);//随机获取颜色
    var value=$(".banner .content").val();//获取输入框的值
    var span=$("<span>"+value+"</span>");//新建元素并赋予value值
    $(".box").append(span);//添加元素
    span.css("left","1530px").css("top",randomY).css("color",colors[randomColor]).animate({  //设置自定义动画
        left:-500
    },10000,function(){
        $(this).remove();//清除弹幕
    })
})

kaolagirl

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
弹幕效果实现 jQuery

效果图主要实现功能：点击弹幕按钮，开启弹幕编辑框编辑好文本，点击发送按钮，文本就显示在弹幕框中运用到的知识Math.random( ) 随机获取parseInt( ) 把字符串转换成数字append( ) 添加元素animate({ },1000) 设置自定义动画overflow: hidden 文本超出的部分隐藏white-space:nowrap ...
复制链接

扫一扫