当前位置：网站首页>JS realizes the effect of text scrolling marquee

JS realizes the effect of text scrolling marquee

2022-07-04 04:18:00 【Undefind_ object】 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #scroll_div {
            height: 30px;
            line-height: 30px;
            overflow:hidden;
            white-space: nowrap;
            width: 800px;
            background-color: #23527c;
            color: #d8d8d8;
            margin: 1rem 0;
            text-align: center;
        }
        #scroll_begin,#scroll_end {
            display: inline;
        }
    </style>
</head>
<body>
<div id="scroll_div">
    <div id="scroll_begin">
        <span class="pad_right"> This is the first one ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah ah </span>
    </div>
    <div id="scroll_end"></div>
</div>
<script>
    function ScrollImgLeft() {
        var speed = 20;// Initialization speed   That is, the overall scrolling speed of the font 
        var MyMar = null;// Initialize a variable to be empty   Used to store the obtained text content 
        var scroll_begin = document.getElementById("scroll_begin");// Get the beginning of the scroll id
        var scroll_end = document.getElementById("scroll_end");// Get the end of scrolling id
        var scroll_div = document.getElementById("scroll_div");// Get the beginning of the whole id
        scroll_end.innerHTML = scroll_begin.innerHTML;// Scrolling is html Internal content , Native knowledge !
        // Define a method 
        function Marquee() {
            if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){
                scroll_div.scrollLeft -= scroll_begin.offsetWidth;
            } else{
                scroll_div.scrollLeft++;
            }
        }
        MyMar = setInterval(Marquee, speed);
        // Slide in pause 
        scroll_div.onmouseover = function () {
            clearInterval(MyMar);
        }
        // Slide out continue 
        scroll_div.onmouseout = function () {
            MyMar = setInterval(Marquee, speed);
        }

    }
    ScrollImgLeft();
</script>
</body>
</html>

原网站

版权声明
本文为[Undefind_ object]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/185/202207032343290880.html

边栏推荐

猜你喜欢

随机推荐