案例五、利用jQuery写一个弹幕

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

画一生情入颜容

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

阅读量712

点赞数

文章标签： jquery 弹幕

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/65688898

版权

在要写一个弹幕案例的时候，首先要清楚每一步要干什么。
首先搭好框架之后在要发送弹幕时应该准备进行如下步骤：

获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();
生成一个元素。
利用jQuery的 var createSpan =$(““)生成一个span元素，以便发送。
给刚创建的span赋值，即获取到的文本框中的值
createSpan.text(str );
设置元素的动画效果,是元素动起来。利用jQuery的animate(css样式值，时间，执行完动画调用的方法)。执行完动画得手动移除刚刚所添加的元素。

里面还有许多细节，仔细看就会有收获！

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
    <title>弹幕案例</title>
    <script src = "http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function(){
        var boxDom = $("#boxDom");
        //var domContent = $("#domContent");

        var top, right;

        var pageWidth = parseInt($(document).width());
        var pageHeight =parseInt($(document).height());

        //点击按钮
        $("#btn").bind("click",auto);//按钮绑定方法
        //按下回车
        document.onkeydown = function(){
            if(event.keyCode == 13){
                auto();
            }
        }
        function auto(){
        //1.获取输入的字符串
        var str = $(".text").val();
        //2.生成一个元素
        var createSpan = $("<span class = 'string' ></span>");

        //3.给生成的元素赋值

        createSpan.text(str);

        //为了页面友好，清空刚刚输入的值
        $(".text").val("");

    //生成元素一个随机的位置，为了使每条弹幕都出现在屏幕上不同的位置
        top = Math.floor(Math.random()*pageHeight);


    createSpan.css({"top":top, "right": -400, "color": getRandomColor()});
        boxDom.append(createSpan);

        //4.设置元素的动画效果，animate(css样式值，时间， 执行完动画调用的方法)

        //页面上有N个span，只让最后一个动起来
        var spandom = $("#boxDom>span:last-child");//找到最后一个span
        spandom.animate({"right":pageWidth+300},10000,function(){
            //移除元素
            $(this).remove();

        });
        }
        //定义一个可以生成随机颜色的方法,可以使每条弹幕的颜色不同
        function getRandomColor(){
            var colorArr = ['1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
            var color = "";
            for(var i = 0; i < 6; i++){
                color += colorArr[Math.floor(Math.random()*16)]; 
            }
            return "#"+color;
        }

    });
    </script>
    <style type="text/css">
    html,body{
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        font-family: "微软雅黑";
        background: #ccc;
    }
    .boxDom{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    .idDom{
        width: 100%;
        height: 60px;
        background:#666;
        position: fixed;
        bottom: 0px;
    }
    .contet{
        width: 500px;
        height: 40px;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin:  auto;

    }
    .title{
        display: inline;
        font-size: 24px;
        vertical-align: bottom;
        color: #ffffff;
        padding-left: 300px;
    }

    .text{
        width: 300px;
        height: 30px;
        border:none;
        border-radius:5px;
        font-size: 20px;
        margin-left:60px;
    }
    .btn{
        width: 60px;
        height: 30px;
        color: #ffffff;
        background-color: red;
        border:none;
        font-size:16px;
        margin-left:60px;
        margin-top: 20px;
    }
    .string {
            width: 300px;
            height: 40px;
            margin-top: 20px;
            position: absolute;
            color: #000;
            font-size: 20px;
            font-family: "微软雅黑";

    }
    </style>
</head>
<body>
<div class = "boxDom" id = "boxDom">
    <img src="../images/bg_2.jpg" style="width:100%; height:100%"  />
    <div id = "idDom" class = "idDom">
        <div class = "content">
            <p class = "title"> 说点什么:</p>
            <input type = "text" class = "text"/>
            <button type = "button" class = "btn" id = "btn" >发送</button>
        </div>
    </div>
</div>
</body>
</html>

效果图如下：
这里写图片描述

画一生情入颜容

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
案例五、利用jQuery写一个弹幕

在要写一个弹幕案例的时候，首先要清楚每一步要干什么。首先搭好框架之后在要发送弹幕时应该准备进行如下步骤：获取到要发送到弹幕上的内容，即获取到文本框输入的内容。通过jquery的var str = $(“#文本框的id”).val();生成一个元素。利用jQuery的 var createSpan =$(““)生成一个span元素，以便发送。给刚创建的span赋值，即获取到的文本框中的值
复制链接

扫一扫