本篇文章介绍原生JS实现列表内容自动向上滚动效果 效果展示 (鼠标移入,滚动停止;鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图: (红色边
本篇文章介绍原生JS实现列表内容自动向上滚动效果 效果展示 (鼠标移入,滚动停止;鼠标移出,滚动继续) ![]()
实现原理
2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden;
CSS:
JavaScript:
|
2021-06-04
2019-01-10
2019-02-17
2021-09-12
2021-09-30