recherche

Maison >interface Web >js tutoriel >code js pour réaliser le glissement du texte vers la gauche et la droite

code js pour réaliser le glissement du texte vers la gauche et la droite

不言
不言original
2018-08-20 17:59:563143parcourir

Le contenu de cet article concerne le code js pour réaliser le glissement du texte vers la gauche et la droite. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            border: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        p#d1, p#d2 {
            width: 102px;
            height: 30px;
            margin: 50px auto;
            border: 1px solid black;
            overflow: hidden;
        }

        p#d3, p#d4 {
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid black;
            overflow: hidden;

        }
    </style>
</head>
<body>
<p id="d1">abcdefghijklmnopqrstuvwxyz123456789</p>
<p id="d2">987654321zyxwvutsrqponmlkjihgfedcba</p>
<p id="d3">
    <p class="pd">
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa4</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa6</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa8</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa9</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa10</p>
    </p>

</p>
<p id="d4">
    <p class="pd2">
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa3</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa4</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa5</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa6</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa8</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa9</p>
        <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa10</p>
    </p>

</p>
<script>
    //向左转
    var d1 = document.getElementById("d1");
    d1.innerHTML += d1.innerHTML;
    setInterval(function () {
        document.title = d1.scrollLeft;
        d1.scrollLeft++;
        if (d1.scrollLeft >= d1.scrollWidth / 2) {
            d1.scrollLeft = 0;
        }
    }, 20);
    //向右转
    var d2 = document.getElementById("d2");
    d2.innerHTML += d2.innerHTML;
    d2.scrollLeft = d2.scrollWidth / 2;
    setInterval(function () {
        document.title = d2.scrollLeft;
        d2.scrollLeft--;
        if (d2.scrollLeft <= 0) {
            d2.scrollLeft = d2.scrollWidth / 2;
        }
    }, 20);
    //向上转
    var d3 = document.getElementById("d3");
    var pd = d3.getElementsByClassName("pd")[0];
    pd.innerHTML += pd.innerHTML;
    setInterval(function () {
        d3.scrollTop++;
        if (d3.scrollTop >= d3.scrollHeight / 2) {
            d3.scrollTop = 0;
        }
    }, 20);
    //向下转
    var d4 = document.getElementById("d4");
    var pd2 = d4.getElementsByClassName("pd2")[0];
    pd2.innerHTML += pd2.innerHTML;
    d4.scrollTop = d4.scrollHeight / 2;
    setInterval(function () {
        d4.scrollTop--;
        if (d4.scrollTop <= 0) {
            d4.scrollTop = d4.scrollHeight / 2;
        }
    }, 20);

</script>
</body>
</html>

Recommandations associées :

Code js pour obtenir le style interligne et le style actuel

Code js pour implémenter un exemple de pile de chaîne

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!

栈 JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js obtient le code du style interligne et du style actuelArticle suivant：js obtient le code du style interligne et du style actuel

Articles Liés

Voir plus