JS模拟实现弹幕功能

最新推荐文章于 2026-02-02 19:39:19 发布

原创最新推荐文章于 2026-02-02 19:39:19 发布 · 3.3k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文记录了在项目中使用JS实现首页弹幕功能的过程。通过JS获取服务器数据并展示，但简单实现可能导致弹幕重叠，实际应用需考虑分层优化。

由于我在项目上面的首页上需要实现一个弹幕小功能，需要不断显示服务器中返回的数据，这里就记录一下JS的具体实现

以下的代码实现

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹幕示例</title>
<style type="text/css">
  html,body{
    background:#efefef;
    height:100%;
  }
  div.mask{
            position:fixed;
            width:100%;
            height:100px;
            /*background:rgba(0,0,0,0.8);*/
            opacity:0.5;
            bottom:0;
            left:0px;
        }
        div.bottom{
            width:100%;
            height:77px;
            background:linear-gradient(#ccc,#4a4a4a);
            position:fixed;
            bottom:0px;
            left:0px;
            text-align:center;
            line-height:77px;
        }
        div.bottom input.content{
            width:50%;
            min-width: 200px;
            height:37px;
            border:none;
            border-radius:10px 0px 0px 10px;
            font-size:16px;
            padding:0 10px;
            outline:none;
        }
        div.bottom a.send{
            background-color:green;
            color:#fff;
            display:inline-block;
            width:100px;
            height:38px;
            line-height:37px;
            text-align:center;
            position:relative;
            left:-10px;
            top:2px;
            border-radius:0px 10px 10px 0px;
            text-decoration:none;
            font-family:'Microsoft Yahei';
        }
        div.mask a.button{
            width:30px;
            height:30px;
            border-radius:50%;
            background-color:#4181ff;
            color:#fff;
            position:fixed;
            bottom:60px;
            right:20px;
            text-align:center;
            line-height:30px;
            font-size:20px;
            font-family:'Microsoft Yahei';
            border:1px solid #fff;
            text-decoration:none;
            cursor:pointer;
        }
        div.text{
            color:white;
            position:fixed;
            right:0px;
            font-size:16px;
            white-space: nowrap;
            background-color: #1b1b1b;
            padding: 6px 20px;
            border: 1px #1b1b1b solid;
            border-radius: 30px;
        }
</style>
</head>
<body>
<button class="danmu">打开弹幕</button>
  <div class="mask">
    <a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>
  </div>
  
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script>

  //模拟数据
  var danmuArr = ['张先生：效果非常好','李先生：质量好，价格低','吴先生：希望继续保持合作关系','陈先生：合作愉快'];
  
    //这里是获取Java中session的数据
	<!-- <% -->
	<!-- var danmuArr = new Array(); -->
        <!-- List<String> list = (List)session.getAttribute("aa"); -->
        <!-- for(String str : list){ -->
            <!-- %> -->
                <!-- danmuArr.push("<%=str%>"); -->
            <!-- <% -->
        <!-- } -->
    <!-- %> -->

	//
    var i = 0;
    var intervarCount;//setInterval函数的返回值，用来关闭方法
	//页面加载完成后执行
    window.onload = function () {
        run()
    };

    function run() {
		//每隔三秒执行一次
        intervarCount = window.setInterval("autoDanmu(danmuArr[i])", 3000);

    }

	//关掉clearInterval方法
    $('.button').click(function () {
        $('div.mask').fadeOut(500);
        clearInterval(intervarCount);
    });

	//重新打开弹幕
    $(".danmu").click(function () {
        $('div.mask').fadeIn(500);
        run();
    });


	//弹幕出现的具体位置，我的固定在底部
    function autoDanmu(text) {

        var content = $("<div class='text'>" + text + "</div>");
		//获取随机位置
        var Rand = Math.random();

        var top = 10 + Math.round(Rand * 40) + "px";
        content.css("bottom", top);
        $(".mask").append(content);
        content.animate({right: $(document.body).width() + 100}, 8000, function () {
            $(this).remove();
        });
        i++;
		//执行完最后一条重置为0，继续重头开始
        if (i + 1 > danmuArr.length) {
            i = 0;
        }
    }
  
  
</script>
</body>
</html>

注意：这里只是粗略效果，如果时间太快和数据太多，这可能出现重叠的情况，如果要避免这种情况，需要分一下层

标签

#js