简易弹幕实现

最新推荐文章于 2024-05-01 08:02:40 发布

weixin_34406061

最新推荐文章于 2024-05-01 08:02:40 发布

阅读量162

点赞数

文章标签： python

原文链接：https://my.oschina.net/lantianbaiyun/blog/1814392

版权

2019独角兽企业重金招聘Python工程师标准>>>

html

    <style>
    #danmu {
        position: absolute;
        top: 5%;
        font-size: 16px;
        width: 100%;
        height: 80%;
        color: aqua;
        white-space: nowrap;
    }
    #danmu span{
        position: absolute;
        font-size: 16px;
        white-space: nowrap;
        right: -2px;
    }
    </style>

    <!-- 外层固定宽高 -->
    <div>
        <div id="danmu"></div>
    </div>

    function showDanmu(data){
          //随机高度添加元素
          var mes_top = ((Math.floor(Math.random()*10000)) % ($("#danmu").height()));
          $("#danmu").append('<span style="top:' + mes_top + 'px">' + data.name+": "+data.msg + '</span>');
    }


    var speeds = {};
    function Speed(){
        var msg_span = $("#danmu span");
        //不断移动存在的所有元素,出边界的移除
        for (var i=0;i<msg_span.length;i++) {
            var next_right_value = (parseInt(msg_span.eq(i).css('right')) + 1) + 'px';
            msg_span.eq(i).css('right',next_right_value);
            if(parseInt(next_right_value) > 2000){
                msg_span.eq(i).remove();
            }
        }
    }

    setInterval(Speed,30);

转载于:https://my.oschina.net/lantianbaiyun/blog/1814392