首页 > 让弹幕滑出弹幕框后消失应该用什么方法?

让弹幕滑出弹幕框后消失应该用什么方法?

<div class="danmu">
        
        <div class="screen">
            
        </div>
        <div class="operate">
            <input type="text" name="input" placeholder="说点什么" />
            <p>
            <button class="act">发射</button>
            <button>清屏</button>
            </p>
        </div>
    </div>
$(document).ready(function(){
        $(".act").click(function(){  
            //点击发射后
            //得到输入的弹幕     
            var input = $(":input").val();
            //将输入的弹幕包裹在p标签内
            var danmu = $("<p class = 'actDanmu'>" + input + "<\/p>");
            //将弹幕以p标签形式加进弹幕框                           
            $(".screen").append(danmu);
            //弹幕右边距
            var right = parseInt($(".screen").css("marginRight"));
            //弹幕可以出现的最上面的位置                           
            var top_loc = parseInt($(".screen").css("marginTop"));
            //弹幕可以出现的最下面的位置
            var bottom_loc = parseInt($(".screen").css("height"));
            //设置弹幕出现的范围
            var location = Math.floor(Math.random() * Math.floor(bottom_loc/25)) * 25 + top_loc;
            $(danmu).css({                             
                "right":right + "px",
                "top":location + "px"
            });
            //弹幕完全滑出弹幕框所需宽度
            var dis = right - parseInt($(danmu).css("width"));
            //弹幕滑出动画
            $(danmu).animate({left:dis},12000);
            //清空输入框内的内容方便再次输入
            $(":input").val("");
        })
})
*{
    padding: 0;
    margin: 0;
}
/*弹幕框*/
.screen{
    width: 1300px;
    height: 380px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    
    margin: 25px auto;
    overflow: hidden;
}
/*操作栏的输入框*/
.operate input{
    display: block;
    margin: 0 auto;
    padding-left: 10px;

    width: 400px;
    height: 35px;
    
    border-radius: 3px;
    border: 1px solid #cccccc;
}
/*操作栏*/
.operate p{
    text-align: center;

}
/*操作栏的按钮*/
.operate p button{
    background-color: #fff;
    color: #b0a8a5;
    letter-spacing: 4px;

    width: 160px;
    height: 35px;
    margin-top: 25px;

    border: 1px solid #b0a8a5;
    border-radius: 3px;
}
/*操作栏的发射按钮*/
.operate p button:first-child{
    border-color: red;
    color: red;
}
/*用户输入的弹幕*/
.actDanmu{
    position:absolute;

    line-height: 25px;

    padding: 0;
    margin: 0;
}

你可以给screen加一个position:relative,让加的内容相对于这个框定位,overflow:hidden;但是你写的这个还有个兼容性问题,谷歌和360都不兼容,我试了目前火狐兼容


$(danmu).animate({left:dis},12000,function(){
    //动画完成后执行的回调方法
});

兄弟,这种情况最好用canvas。如果弹幕多的话,页面将会非常的卡顿。这么频繁的dom操作,会卡死的。

【热门文章】
【热门文章】