JS實現彈幕效果（10.11—10.17）

Rest257發表於2020-10-17
JS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彈幕效果</title>
    <link rel="stylesheet" href="../拉勾網首頁/common.css">
    <link rel="stylesheet" href="../拉勾網首頁/reset.css">
</head>
<style>
    .container{
        margin-top: 40px;
    }
    .img{
        margin: 0 auto;
        width: 800px;
        height: 300px;
        border: 2px solid gold;
        box-sizing: border-box;
        background: url(./manco2.jpg) no-repeat left top /800px 300px ;
        position: relative;
        overflow: hidden;
    }
    .img span{
        position: absolute;
        top: 0;
        left: 800px;
        display: block;
        overflow: hidden;
        white-space: nowrap; /* 解決了出現了傳送的彈幕剛進入畫面時沒有換行的問題 */
    }
    .send{
        margin: 0 auto;
        width: 800px;
        height: 50px;
        background-color: gold;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
    }
    .send .left{
        line-height: 50px;
        margin-right: 60px;
    }
    .send input{
        font-size: 18px;
        border: none;
        height: 40px;
        width: 400px;
        margin-top: 4px;
        margin-left: 50px;
        border-radius: 4px;
        text-indent: 1em;
    }
    .send .button{
        cursor: pointer;
    }
</style>
<body>
    <div class="container">
        <div class="img" id="img"></div>
        <div class="send clearfix">
            <input type="text" id="text" class="left">
            <div id="btns" class="button left">傳送</div>
            <div id="btnh" class="button left">隱藏</div>
            <div id="btnp" class="button left">顯示</div>
        </div> 
    </div>
    <script src="./tools.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function Sendmessages(){
            var oSpan = document.createElement('span');
            oSpan.innerHTML = $('text').value;
            $('img').appendChild(oSpan);
            var spanTop = Math.floor(Math.random()*250) + 'px';
            changeCss(oSpan, 'top', spanTop);
            changeCss(oSpan, 'color', rC());
            move(oSpan);
            $('text').value = "";
        }
        function move(elem){
            var left = changeCss(elem, 'left');
            var timer = setInterval(() => {
                var spanWidth = elem.offsetWidth;
                if(parseInt(left) >= -spanWidth){
                    left = parseInt(changeCss(elem, 'left'));
                    changeCss(elem, 'left', left - 2 + 'px');
                }else{
                    elem.remove();
                }
        }, 20);
        }
        function rC() {
            let r = Math.floor(Math.random() * 255);
            let g = Math.floor(Math.random() * 255);
            let b = Math.floor(Math.random() * 255);
            let rgb = `rgb(${r},${g},${b})`;
            return rgb;
        }
        addEvent($('btns'), 'click', Sendmessages);
        addEvent(document, 'keydown', function(e){
                var event = e || window.event;
                if(event.keyCode == 13){
                    Sendmessages();
                }
            });
    </script>
</body>
</html>

tool.js 我的js工具庫

common.css 和 reset.css

效果
在這裡插入圖片描述

相關文章