当前位置：首页 > jquery

jquery 弹幕

2026-04-08 13:46:47jquery

jQuery 弹幕实现方法

使用 jQuery 实现弹幕功能可以通过动态创建元素并控制其动画效果来完成。以下是具体实现步骤：

HTML 结构

<div id="danmu-container" style="position: relative; width: 800px; height: 400px; overflow: hidden; border: 1px solid #000;"></div>
<input type="text" id="danmu-input" placeholder="输入弹幕内容">
<button id="send-danmu">发送弹幕</button>

CSS 样式

jquery 弹幕

.danmu-item {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    font-size: 20px;
    animation: danmuMove linear;
}

jQuery 代码

$(function() {
    // 发送弹幕
    $('#send-danmu').click(function() {
        var text = $('#danmu-input').val().trim();
        if(text) {
            createDanmu(text);
            $('#danmu-input').val('');
        }
    });

    // 回车发送
    $('#danmu-input').keypress(function(e) {
        if(e.which == 13) {
            $('#send-danmu').click();
        }
    });

    // 创建弹幕函数
    function createDanmu(text) {
        var container = $('#danmu-container');
        var height = container.height();
        var width = container.width();

        // 随机颜色和位置
        var color = '#' + Math.floor(Math.random()*16777215).toString(16);
        var top = Math.floor(Math.random() * (height - 30));

        // 创建弹幕元素
        var danmu = $('<div class="danmu-item">' + text + '</div>')
            .css({
                'color': color,
                'top': top + 'px',
                'left': width + 'px'
            });

        // 添加到容器
        container.append(danmu);

        // 动画效果
        danmu.animate({
            left: -danmu.width()
        }, 10000, 'linear', function() {
            $(this).remove();
        });
    }

    // 自动生成示例弹幕
    setInterval(function() {
        var texts = ['666', '哈哈哈', '太棒了', '学到了', '前排'];
        var text = texts[Math.floor(Math.random() * texts.length)];
        createDanmu(text);
    }, 2000);
});

弹幕功能优化建议

速度控制 可以通过调整动画持续时间来控制弹幕速度：

jquery 弹幕

danmu.animate({
    left: -danmu.width()
}, Math.random() * 5000 + 5000, 'linear', function() {
    $(this).remove();
});

碰撞检测 实现弹幕不重叠显示：

function isOverlap(top, height) {
    var overlaps = false;
    $('.danmu-item').each(function() {
        var itemTop = parseInt($(this).css('top'));
        if(Math.abs(top - itemTop) < height) {
            overlaps = true;
            return false; // 退出循环
        }
    });
    return overlaps;
}

弹幕样式增强 添加更多样式选项：

.css({
    'color': color,
    'top': top + 'px',
    'left': width + 'px',
    'font-weight': 'bold',
    'font-size': (Math.random() * 10 + 16) + 'px'
})