弹幕从右边往左边跑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 800px;
            height: 500px;
            margin: 40px auto;
            background-color: #ddd;
        }
        #content{
            height: 450px;
            position: relative;
            overflow: hidden;
        }
        #content > img{
            height: 450px;
            width: 800px;
        }
        #send{
            display: flex;
            height: 50px;
        }
        #inp{
            flex:1;
        }
        #btn{
            width: 100px;
        }
        .danmu{
            position: absolute;
            left: 800px;
            display: flex;
            white-space: nowrap;
            align-items: center;
            color: #949c1e;
            font-weight: bold;
        }
        .danmu img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 6px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="content">
            <img src="./7.jpg" alt="">
            <!-- <p class="danmu">
                <img src="./7.jpg" alt="">
                <span>弹幕内容</span>
            </p> -->
        </div>
        <div id="send">
            <input type="text" id="inp">
            <input type="button" id="btn" value="send">
        </div>
    </div>


    <script>

        btn.onclick = function() {
            if(!inp.value) return 
            createDanMu(inp.value)
        }
  
        function createDanMu(suibian) {
            var oP = document.createElement('p') ;
            oP.className = 'danmu' ;
            oP.innerHTML = `
                <img src="./7.jpg" alt="">
                <span>${suibian}</span>
            `
            // 插入节点之后才能获取到样式
            content.appendChild(oP);
            var max = content.clientHeight - oP.offsetHeight ;
            console.log(content.clientHeight);
            console.log(oP.offsetHeight);        
            oP.style.top = parseInt(Math.random() * max) + 'px' ;
            

            move(oP , 7 , -oP.offsetWidth , 'left' , function() {
                oP.remove()
            })
        }





        function move(ele , speed , end , prop , cb ) {
            // 获取初始位置
            var start = parseInt(getStyle( ele , prop)) ;
            // 速度
            speed = (end > start) ? speed : -speed ;
            var t = setInterval(function(){
                start += speed ;
                ele.style[prop] = start + 'px' ;
                if(Math.abs(start - end) < Math.abs(speed)) {
                    clearInterval(t) ;
                    // 防止运动过头
                    start = end ;
                    ele.style[prop] = start + 'px' ;

                    // 运动结束之后做其他事情   -- 调用
                    // if(cb) {
                    //     cb() 
                    // }
                    cb && cb()
                    
                }
            },20)
        }


        function getStyle(ele , prop) {
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }

    </script>
</body>
</html>
posted @ 2021-04-13 19:35  干饭吧  阅读(48)  评论(0编辑  收藏  举报