实现数据自下向上无限滚动 |
您所在的位置：网站首页 › qq无限svip › 实现数据自下向上无限滚动 |
实现数据自下向上无限滚动
|
类似与这种效果
有时候我们做可视化大图时，可能会用到这种效果，就是把数据无限滚动，鼠标经过时，它会暂停，点击时，会跳转等等一些效果。 主要用到了动画（animation），鼠标经过暂停用到了（animation-play-state）这个属性。为了看起来像是无限滚动，我们需要克隆数据的前几条，这里我直接把节点全克隆了一份，放到了末尾。如果用vue或者react，这里肯定是循环渲染（v-for / map），就只需要往数据源里面，再把前几条克隆几条放到数据源末尾就行了。往后台传的时候，把末尾加入的那几条去掉即可 demo.html Document 1 2 3 4 5 6 7 8 9 10 const ul = document.querySelector('.content ul') const lis = ul.querySelectorAll('li') lis.forEach(item => { let newNode = item.cloneNode(true) ul.appendChild(newNode) })demo.css * { padding: 0; margin: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } li { list-style: none; } .box { width: 300px; height: 300px; background-color: pink; margin: 20px auto; overflow: hidden; } .box .content li { height: 30px; border-bottom: 1px solid #000; cursor: pointer; } .box .content { animation: move 10s linear infinite; } /* 向上滚动的动画 */ @keyframes move { 100% { transform: translateY(-50%); } } /* 鼠标经过就暂停 */ .box .content:hover { animation-play-state: paused; }其他方向都是同理，只需要改一下动画就行了 |
【本文地址】
今日新闻 |
推荐新闻 |