js实现消息滚动效果-前端开发

实现消息滚动效果有很多种方式，这里提供一种基于JS实现的方法：

实现消息滚动效果有很多种方式，这里提供一种基于JS实现的方法：

1. 初步实现

首先，在需要实现消息滚动效果的HTML页面中，建立一个 <div> 容器，用来包含滚动的消息。然后在CSS样式中设置容器的高度和宽度等基本属性。

在JS中，获取该容器并且将其内容进行复制一次，从而可以实现消息的不停循环滚动。使用setInterval函数实现定时不断改变容器的top值，实现滚动效果。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS消息滚动效果</title>
    <style type="text/css">
        #scroll-container {
            height: 100px;
            width: 300px;
            border: 1px solid #ccc;
            overflow: hidden;
            position: relative;
        }
        #scroll-container-inner {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-container-inner">
            <p>第一个消息</p>
            <p>第二个消息</p>
            <p>第三个消息</p>
            <p>第四个消息</p>
        </div>
    </div>

    <script type="text/javascript">
        var scrollInterval;

        function startScroll() {
            scrollInterval = setInterval(scroll, 30);
        }

        function scroll() {
            var scrollContainer = document.getElementById('scroll-container');
            var scrollContainerInner = document.getElementById('scroll-container-inner');

            if (scrollContainerInner.offsetTop <= -scrollContainerInner.offsetHeight) {
                scrollContainerInner.style.top = "0px";
            } else {
                scrollContainerInner.style.top = scrollContainerInner.offsetTop - 1 + "px";
            }
        }

        startScroll();
    </script>
</body>
</html>

2. 添加鼠标事件操作

上面的示例中，滚动效果是自动的，为了方便用户操作，我们可以添加鼠标事件，当鼠标悬停在滚动容器上时，滚动停止，鼠标移开后滚动继续。

在JS中，对容器添加 onmouseover 和 onmouseout 事件，当事件触发时暂停或恢复滚动。

代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS消息滚动效果</title>
    <style type="text/css">
        #scroll-container {
            height: 100px;
            width: 300px;
            border: 1px solid #ccc;
            overflow: hidden;
            position: relative;
        }
        #scroll-container-inner {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="scroll-container" onmouseover="stopScroll()" onmouseout="startScroll()">
        <div id="scroll-container-inner">
            <p>第一个消息</p>
            <p>第二个消息</p>
            <p>第三个消息</p>
            <p>第四个消息</p>
        </div>
    </div>

    <script type="text/javascript">
        var scrollInterval;

        function startScroll() {
            scrollInterval = setInterval(scroll, 30);
        }

        function stopScroll() {
            clearInterval(scrollInterval);
        }

        function scroll() {
            var scrollContainer = document.getElementById('scroll-container');
            var scrollContainerInner = document.getElementById('scroll-container-inner');

            if (scrollContainerInner.offsetTop <= -scrollContainerInner.offsetHeight) {
                scrollContainerInner.style.top = "0px";
            } else {
                scrollContainerInner.style.top = scrollContainerInner.offsetTop - 1 + "px";
            }
        }

        startScroll();
    </script>
</body>
</html>

以上就是基于JS实现消息滚动效果的攻略。

1. 初步实现

2. 添加鼠标事件操作

基础教程推荐