js实现弹幕效果

时间：2016-07-31 15:59:02 阅读：278 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>js实现弹幕效果</title>
    <style>
        #play {
            width: 600px;
            height: 500px;
            background-color: #000;
        }

        /*方便js获取高度*/
        #danmu{
            width:600px;
            height:500px;
            background-color:#fff;
            z-index:9999;
            background-color: rgba(0, 1, 0, 0.1);
        }
        
        #textStyle {
            position: absolute;
            font-size: 24px;
            color: #ffffff;
        }
    </style>
</head>
<body>


<div id="play">
    <div id="danmu"></div>
</div>

<input type="text" id="text" value="这是弹幕..."/>
<input type="button" value="发送" onclick="danmu()"/>

<script src="jquery-3.1.0.min.js"></script>
<script>
    var si; // 初始化定义定时器变量
    function danmu() {
        // 每次执行弹幕函数的前清除一次定时器
        clearInterval(si);

        var text = $(‘#text‘);
        var danmu = $(‘#danmu‘);
        var textStyle = ‘<span id="textStyle">‘ + text.val() + ‘</span>‘;

        danmu.get(0).innerHTML = textStyle;

        var textTop = Math.round(Math.random()*danmu.height()) + ‘px‘;
        var textLeft = danmu.width() + ‘px‘;

        var textStyleObj = $(‘#textStyle‘);
        textStyleObj.css({
            ‘left‘: textLeft,
            ‘top‘: textTop
        });

        var x = parseInt(textStyleObj.css(‘left‘));
        //console.log(x);

        //textMove(x);

        var animateLeft = 600;
        si = setInterval(function () {
            if(animateLeft < -parseInt(textStyleObj.width())) {
                // 停止定时器，清空弹幕
                clearInterval(si);
                danmu.text(‘‘);
                //console.log(‘清除定时器‘);
            }else {
                // 弹幕的left值减一
                animateLeft--;
                //console.log(animateLeft);
            }

            textStyleObj.css(‘left‘, animateLeft + ‘px‘);
        }, 10);
    }

</script>



</body>
</html>

js实现弹幕效果

标签：

原文地址：http://www.cnblogs.com/lqcdsns/p/5723050.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行