原生JS实现无缝滚动

最新推荐文章于 2024-04-28 18:13:10 发布

Golden heart

最新推荐文章于 2024-04-28 18:13:10 发布

阅读量295

点赞数

分类专栏： JavaScript 文章标签：无缝滚动

本文链接：https://blog.csdn.net/weixin_45072327/article/details/98168667

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

页面结构

<body onload="trundle();">
<div id="box">
  <div id="box1">
   <ul id="con1">
    <li>
     <a href="#">1.HTML基本语法</a>
    </li>
    <li>
     <a href="#">2.css样式书写</a>
    </li>
    <li>
     <a href="#">3.HTML+CSS实现网页布局</a>
    </li>
    <li>
     <a href="#">4.JavaScript基础语法</a>
    </li>
    <li>
     <a href="#">5.JavaScript数组</a>
    </li>
    <li>
     <a href="#">6.JavaScript中DOM基本操作</a>
    </li>
    <li>
     <a href="#">7.JavaScript的OOP思想实现贪吃蛇游戏</a>
    </li>
    <li>
     <a href="#">8.jQuery基础</a>
    </li>
    <li>
     <a href="#">9.jQuery动画制作</a>
    </li>
    <li>
     <a href="#">10.jQuery插件使用技巧讲解</a>
    </li>
    <li>
     <a href="#">11.jQuery特效的实现</a>
    </li>
   </ul>
   <ul id="con2"></ul>
  </div>
  </div>
</body>

css

<style type="text/css">
   #box {width: 350px;height: 400px;}
   #box1 {width: 100%;height: 400px; overflow: hidden;}
   #box a {text-decoration: none;color: black;}
   ul {list-style: none;}
   li {margin-top: 5%;}
  </style>

JavaScript

<script type="text/javascript">
   function getByid(id){
    return document.getElementById(id);
   }
   function trundle(){
    var box1=getByid('box1');
    var con1=getByid('con1');
    var con2=getByid('con2');
    con2.innerHTML=con1.innerHTML; // 第二个ul复制第一个ul
    if(box1.scrollTop>con1.offsetHeight){ // 滚动条距顶部距离>ul的高度 offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。
     box1.scrollTop=0; // 返回顶部
    }else{
     box1.scrollTop++; //滚动条距顶部距离递增(1px)
    }
   }
   setInterval('trundle()',10); // 定时器调用gundong(),每10ms调用一次(每10ms向下滚动1像素)
  </script>

Golden heart

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现无缝滚动

页面结构<body onload="trundle();"><div id="box"> <div id="box1"> <ul id="con1"> <li> <a href="#">1.HTML基本语法</a> </li> <li> ...
复制链接

扫一扫

专栏目录