Utilisez le code JS pour créer des effets de barrage

Cette fois, je vais vous montrer comment utiliser le code JS pour créer des effets de barrage. Quelles sont les précautions pour utiliser le code JS pour créer des effets de barrage. Voici des cas pratiques, jetons un coup d'œil.

Principe de mise en œuvre

1. Définissez l'attribut de position de l'élément de barrage d'affichage sur relatif
2 Créez dynamiquement l'élément de barrage, définissez l'attribut de position sur absolu et à gauche se trouve l'affichage. width
3. Définissez aléatoirement la valeur supérieure de l'élément de barrage
4. Générez aléatoirement la vitesse de déplacement de l'élément de barrage, modifiez la valeur de gauche

couleur aléatoire

La première implémentation let color = '#' + Math. floor(Math.random() * 0xffffff).toString(16);

La deuxième implémentation let color = '#' + Math.floor(Math.random( ) * 16777215).toString(16) ;

La troisième implémentation let r = Math.floor(Math.random()*256);let g = Math.floor(Math.random()*256) ;let b = Math.floor( Math.random()*256);let color = `rgb(${r},${g},${b})`;

Aléatoire taux

50 * +Math.random().toFixed(2)

code

//html

<div class="container">
    <div id="content" class="content"></div>
    <div class="content-opt">
        <div id="content-text" class="content-text"></div>
        <div class="content-input">
            <input id="text" type="text">
            <button id="send">发送</button>
        </div>
    </div>
</div>

//css

* {
    box-sizing: border-box;
    outline: none;
}
p {
    margin: .5em;
    word-break: break-all;
}
.container {
    position: relative;
    width: 700px;
    height: 500px;
    margin: auto;
    padding-right: 200px;
}
.content {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;}
.content-opt {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
}
.content-text {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    border: 1px solid #ccc;
    overflow: auto;
}
.content-input {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;}
.content-input input {
    width: 70%;
    padding: 2px;
    border-radius: 5px;
}
.content-input button {
    padding: 3px 10px;
    border: none;
    border-radius: 5px;
    background: rgb(90, 154, 214);
}

//js

(function () {
    class Barrage {
        constructor(id) {
            this.domList = [];
            this.dom = document.querySelector('#' + id);            if (this.dom.style.position == '' || this.dom.style.position == 'static') {
                this.dom.style.position = 'relative';
            }
            this.dom.style.overflow = 'hidden';            let rect = this.dom.getBoundingClientRect();
            this.domWidth = rect.right - rect.left;
            this.domHeight = rect.bottom - rect.top;
        }
        shoot(text) {            let div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.left = this.domWidth + 'px';
            div.style.top = (this.domHeight - 20) * +Math.random().toFixed(2) + 'px';
            div.style.whiteSpace = 'nowrap';
            div.style.color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
            div.innerText = text;
            this.dom.appendChild(div);            let roll = (timer) => {                let now = +new Date();
                roll.last = roll.last || now;
                roll.timer = roll.timer || timer;                let left = div.offsetLeft;                let rect = div.getBoundingClientRect();                if (left < (rect.left - rect.right)) {
                    this.dom.removeChild(div);
                } else {                    if (now - roll.last >= roll.timer) {
                        roll.last = now;
                        left -= 3;
                        div.style.left = left + &#39;px&#39;;
                    }
                    requestAnimationFrame(roll);
                }
            }
            roll(50 * +Math.random().toFixed(2));
        }
    }    let barage = new Barrage(&#39;content&#39;);    function appendList(text) {        let p = document.createElement(&#39;p&#39;);
        p.innerText = text;
        document.querySelector(&#39;#content-text&#39;).appendChild(p);
    }
    document.querySelector(&#39;#send&#39;).onclick = () => {        let text = document.querySelector(&#39;#text&#39;).value;
        barage.shoot(text);
        appendList(text);
    };
    const textList = [&#39;弹幕&#39;, &#39;666&#39;, &#39;233333333&#39;, &#39;javascript&#39;, &#39;html&#39;, &#39;css&#39;, &#39;前端框架&#39;, &#39;Vue&#39;, &#39;React&#39;, &#39;Angular&#39;,        &#39;测试弹幕效果&#39;
    ];
    textList.forEach((s) => {
        barage.shoot(s);
        appendList(s);
    })
})()

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser le canevas H5 pour créer des effets de barrage

Utiliser le canevas H5 pour créer des animations d'horreur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!