原生js利用scrollTop属性完成的文字无缝轮播

最新推荐文章于 2024-05-19 18:43:23 发布

flyingpig2016

最新推荐文章于 2024-05-19 18:43:23 发布

阅读量2.9k

点赞数 3

分类专栏： javascript js插件文章标签： javascript scrollTop 文字轮播

本文链接：https://blog.csdn.net/flyingpig2016/article/details/52968016

版权

javascript 同时被 2 个专栏收录

49 篇文章 2 订阅

订阅专栏

js插件

5 篇文章 0 订阅

订阅专栏

用scrollTop属性完成的文字无缝轮播

在写效果之前，我们必须知道用到的知识哈:
scrollTop意义：con里面文档的顶部相对于它自己的偏移量，也就是父元素con里面的文档向上翻动的高度
下面为我亲测的例子，很简单一看就能明白scrollTop的含义：
首先是css样式：

<style>
    * {margin: 0;padding: 0;}
    ul li {list-style: none;}
    #con {width: 300px;height: 200px;margin: 50px;background-color: #fff;border: 1px solid #000;overflow: auto;}
    ul li {display: block;height: 20px;background-color: #ccc;padding: 10px;
        border-bottom: 1px solid #fff;}#sTop{background: #ccc;}
</style>

接下来是body体的内容：

<body>  
    <div id="con">  
        <ul id="con1">  
            <li>11111111111</li>  
            <li>222222222222</li>  
            <li>3333333333333333</li>  
            <li>44444444444444</li>  
            <li>5555555555555</li>  
            <li>66666666666</li>  
            <li>777777777777</li>  
        </ul>  
        <ul id="con2"><li></li></ul>  
    </div>  
    <input type="text" id="sTop">
</body>

下面的是js代码，效果：当鼠标放上去，轮播暂停，鼠标移出，轮播开始：

<script>
    window.onload = function () {
        var con = document.getElementById('con');
        var scrollNum = document.getElementById('sTop');
        var con1 = document.getElementById('con1');
        var con2 = document.getElementById('con2');
        console.log(con1.offsetHeight)
        con2.innerHTML = con1.innerHTML; //克隆con1  
        function scTop() {
            if (con.scrollTop >= con1.offsetHeight) {
                con.scrollTop = 0;
            } else {
                con.scrollTop++;
            }
        }
        var setTime = setInterval(scTop, 50);
        con.onmouseover = function () {
            clearInterval(setTime);
        }
        con.onmouseout = function () {
                setTime = setInterval(scTop, 50);
            }
            //scrollTop意义：con里面文档的顶部相对于con的偏移量，也就是里面文档向上翻动的高度  
        scrollNum.innerHTML = con.scrollTop;
        con.onscroll = function () {
            scrollNum.value = con.scrollTop;
        }
    }
</script>

运行效果如下所示：
这里写图片描述

其中233.6是当前的scrollTop的值

这里写图片描述

flyingpig2016

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js利用scrollTop属性完成的文字无缝轮播

用scrollTop属性完成的文字无缝轮播以前写的博客自己木有查看，造成了博客css代码在CSDN上解析错误，再次向大家表示抱歉：好了，闲话不多说了，咱们转入正题：文字无缝轮播的效果，在写效果之前，我们必须知道用到的知识哈: scrollTop意义：con里面文档的顶部相对于它自己的偏移量，也就是父元素con里面的文档向上翻动的高度下面为我亲测的例子，很简单一看就能明白scrollTo
复制链接

扫一扫