利用JS、CSS实现列表自动滑动滚动效果实例

 更新时间:2024年07月06日 14:33:48   作者:是洋洋a  
这篇文章主要给大家介绍了关于利用JS、CSS实现列表自动滑动滚动效果的相关资料,本人在项目中遇到这样的需求,亲自来做的,通过html页面配合js,css来做出的列表自动滑动,需要的朋友可以参考下

零.业务需求

这几天在做大屏项目,对于大屏有很多信息需要实时滚动,废了点力气学的明明白白的,特来记录供大家学习。

0.1实现效果

一.逻辑分析

1.1滑动窗口和滚动条

当我们使用<table>或者<ul>标签时,我们可以制作一个滚动条,通过滚动条来实现我们想要查看的内容。

在滚动窗口内,“已经滚动过去”的区域我们称为:“scrollHeight”,“还未滚动到”的 区域我们称为:“scrollBottom”,“当前显示区域”称为:“scrollNow”。

我们再用一张图来描述一下,上面三个概念

可能有点丑...

为方便,上面这一整个区域(scrollTop、scrollNow、scrollBottom),我们统称为:“滑动窗口

1.2逻辑构思

如果我们有:“两份一模一样的数据顺序排列在一起形成一份数据”,再将这一份数据中的“元素”挨个展示在我们的“scrollNow”区域中,当这份数据的最后一个“元素”被展示时,我们重新让一整份数据从头开始,这样就在视觉上实现了滚动的效果

在这里,有一个关键性的问题:“两份数据的长度一定要大于显示区域的长度,否则将无法实现滑动

至于为什么,大家思考一下就行,当我们的数据滑动时,滑动过去的数据被“隐藏”了,但并不是消失了!

如果我们的“可显示区域”大于“数据”的长度,那么就会出现下面的情况:

当显示区域的长度足够容纳:“所有的数据”,此时还有“滑动”的必要吗???

我们“滑动”的原因是因为:“数据量太大,展示区域有限,故让它滑动方便查看

1.3伪代码实现

在js中,有几个属性:

scrollTop”用来“设置或者获取”元素的已滚动的上部不可见区域”的高度,这个概念就是我们上述讲的“scrollTop”(已经滚动过的区域)

scrollHeight”用来“返回”元素所有内容的“总高度”(包括折叠不见的),这个就是我们上述所说的(scrollTop+scrollNow+scrollBottom)

利用这几个属性,我们可以设定一个计时器用来计时,每次计时器加值时,scrollTop的值随之加值(向上滚动),从而实现了滚动

二.代码实现

2.1创建骨架

我们先创建一个div盒子,作为整个列表的骨架:

    <div id="review_box">
            <ul id="comment1">
                <li>第一条</li>
                <li>第二条</li>
                <li>第三条</li>
                <li>第四条</li>
                <li>第五条</li>
                <li>第六条</li>
            </ul>
            <ul id="comment2"></ul>
    </div>

其中“comment1<ul>原数据,“comment2<ul>原数据的副本,这两部分数据组合在一起形成我们的“一整个数据

<li>就是我们的“元素”,方便起见我这里内置数据,后面根据需要可以自己再写一个函数添加数据。

2.2创建样式

只有骨架是不行的,没有用到CSS美观是很丑的,如果不使用CSS,那么就是下图这个样子:

为此我们使用如下代码:

    <style>
        div {
            width: 100px;
            height: 100px;      /*列表的长度*/
            overflow: hidden;/* 必须 */
            margin: 50px auto;
            border: 1px solid red;
            text-align: center;
        }
        ul {
            margin: 0;
            padding: 0;         /*元素居中*/
            list-style: none;   /*去掉元素前面的标签*/
        }
        li{
            height: 20px;  /*元素高度,数据的高度等于元素个数乘元素高度*/
        }
    </style>

2.3JS代码

我们先创建一个“roll”滚动函数,用来实现控制“鼠标悬停在列表上时暂停滚动”、“鼠标离开列表时继续滚动

我们分别使用:“onmouseover”和“onmouseout两个事件来完成。

实现“向上滚动”和“向下滚动”在js中有些许不同,这里先以“向上滚动”为例

        function roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 开始无滚动时设为0
            var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
            // 鼠标移入div时暂停滚动
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠标移出div后继续滚动
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }

我们再创建一个“rollStart”函数,用来启动“自动滑动

        function rollStart() {
            // 上面声明的DOM对象为局部对象需要再次声明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop += 1;
            }
    }

最后,在代码的最前面加一句:

         window.onload = roll(20);

用来代码在页面加载完毕时自动启动,一切就完成啦!!

附:

如果想要列表向下滚动,我们只改动三处数值即可:

ulbox.scrollTop = ul1.scrollHeight; // 开始无滚动时设列表最长高度,用来表示到底了

 上面将初始“scrollTop”置为最大值,表示此时数据底部到底了,即无法继续向下滑动,只能向上滑动

// 正常滚动不断给scrollTop的值减一,当滚动高度小于等于0时,需要重新为最大高度
if (ulbox.scrollTop > 0) {
    ulbox.scrollTop = ul1.scrollHeight;
}
else {
    ulbox.scrollTop -= 1;
}

上面控制“scrollTop”的值每次减一,如果小于等于0了,说明此时数据顶部到底了,即无法继续向上滑动,只能向下滑动

值得注意:

若向下滑动,对应的数据也应是逆置的,否则将会出现部分数据无法正常滑动:

    <div id="review_box">
            <ul id="comment1">
                <li>第六条</li>
                <li>第五条</li>
                <li>第四条</li>
                <li>第三条</li>
                <li>第二条</li>
                <li>第一条</li>
            </ul>
            <ul id="comment2"></ul>
    </div>

 不过若此时(列表长度等于原数据长度[不是整个数据]的高度,那么数据可以不用逆置)

三.全部代码

下面代码,复制粘贴即可使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;      /*列表的长度*/
            overflow: hidden;/* 必须 */
            margin: 50px auto;
            border: 1px solid red;
            text-align: center;
        }
        ul {
            margin: 0;
            padding: 0;         /*元素居中*/
            list-style: none;   /*去掉元素前面的标签*/
        }
        li{
            height: 30px;  /*元素高度,数据的高度等于元素个数乘元素高度*/
        }
    </style>
</head>
<body>
    <div id="review_box">
            <ul id="comment1">
                <li>第一条</li>
                <li>第二条</li>
                <li>第三条</li>
                <li>第四条</li>
                <li>第五条</li>
                <li>第六条</li>
            </ul>
            <ul id="comment2"></ul>
    </div>
    <script>
         window.onload = roll(20);
  
        function roll(t) {
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            ul2.innerHTML = ul1.innerHTML;
            ulbox.scrollTop = 0; // 开始无滚动时设为0
            var timer = setInterval(rollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
            // 鼠标移入div时暂停滚动
            ulbox.onmouseover = function () {
                clearInterval(timer);
            }
            // 鼠标移出div后继续滚动
            ulbox.onmouseout = function () {
                timer = setInterval(rollStart, t);
            }
        }
 
        // 开始滚动函数
        function rollStart() {
            // 上面声明的DOM对象为局部对象需要再次声明
            var ul1 = document.getElementById("comment1");
            var ul2 = document.getElementById("comment2");
            var ulbox = document.getElementById("review_box");
            // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
            if (ulbox.scrollTop >= ul1.scrollHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop += 1;
            }
    }
    </script>
</body>
</html>

总结 

到此这篇关于利用JS、CSS实现列表自动滑动滚动效果的文章就介绍到这了,更多相关JS实现列表自动滑动滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Omi v1.0.2发布正式支持传递javascript表达式

    Omi v1.0.2发布正式支持传递javascript表达式

    这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • javascript事件模型实例分析

    javascript事件模型实例分析

    这篇文章主要介绍了javascript事件模型用法,实例分析了事件模型、事件对象、事件监听器及事件传递的定义与使用技巧,需要的朋友可以参考下
    2015-01-01
  • promise处理多个相互依赖的异步请求(实例讲解)

    promise处理多个相互依赖的异步请求(实例讲解)

    下面小编就为大家带来一篇promise处理多个相互依赖的异步请求(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 小程序实现列表点赞功能

    小程序实现列表点赞功能

    这篇文章主要为大家详细介绍了小程序实现列表点赞功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS获取鼠标坐标位置实例分析

    JS获取鼠标坐标位置实例分析

    这篇文章主要介绍了JS获取鼠标坐标位置的方法,结合实例形式分析了JavaScript常见的获取鼠标页面、屏幕等坐标位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-01-01
  • 浅谈js的异步执行

    浅谈js的异步执行

    下面小编就为大家带来一篇浅谈js的异步执行。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS中循环字符串拼接时加换行问题

    JS中循环字符串拼接时加换行问题

    这篇文章主要介绍了JS中循环字符串拼接时加换行问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • JavaScript 的setTimeout与事件循环机制event-loop

    JavaScript 的setTimeout与事件循环机制event-loop

    这篇文章主要介绍了JavaScript 的setTimeout与事件循环机制event-loop,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-07-07
  • JavaScript柯里化函数式编程面试详解

    JavaScript柯里化函数式编程面试详解

    这篇文章主要介绍了JavaScript柯里化函数式编程,JS柯里化是前端面试中最常见的问题之一,它可以让你的代码更简洁,工作更高效,感兴趣想要详细了解可以参考下文
    2023-05-05
  • 原生JS实现九宫格抽奖

    原生JS实现九宫格抽奖

    这篇文章主要为大家详细介绍了原生JS九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09

最新评论