源码）"/>
【博主推荐】html好看的列表滚动效果（附源码）
文章目录
- 【博主推荐】html好看的列表滚动效果介绍
- 1.界面效果示例
- 1.1单列表效果
- 1.2多列表效果
- 2.html中body代码
- 3.引用方式
- 3.1.嵌套在自己的界面代码
- 3.2.通过iframe调用该界面
- 4.常见问题
- 4.1列宽调整
- 4.2滚动时间调整
- 5.源码下载
【博主推荐】html好看的列表滚动效果介绍
- 功能实现
1.实现列表滚动，上下无缝衔接；
2.实现鼠标悬浮停止滚动；
3.实现多列表滚动;
- 使用技术
html + css + js
1.界面效果示例
1.1单列表效果
1.2多列表效果
2.html中body代码
<body><div class="monitor panel"><div class="inner"><div class="content" style="display: block;"><div class="head"><span class="col">我是第一</span><span class="col">我是内容</span><span class="col">我是时间</span></div><div class="marquee-view"><div class="marquee"><div class="row"><span class="col">北上广1</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广2</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广3</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广4</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广5</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广6</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广7</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广8</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广9</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div><div class="row"><span class="col">北上广10</span><span class="col">思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟</span><span class="col">20220520</span><span class="icon-dot"></span></div></div></div></div></div></div>
</body>
3.引用方式
3.1.嵌套在自己的界面代码
//根据实际大小调整最外层大小
<div style="width:100%;height:90%;position:relative;overflow:hidden;">
</div>
//调整这个样式宽高可以调整真个列表的大小
.monitor{width:100%;height:100%;position:absolute;}
3.2.通过iframe调用该界面
<iframe name="iframe0" width="100%" height="100%" src="界面地址" frameborder="0" ></iframe>
4.常见问题
4.1列宽调整
最好掌握列宽方式，是在浏览器上进行样式调整，看看最合适的大小
.monitor .col:nth-child(1) {width: 3.2rem;//第一列调整这个大小可以调整列宽}.monitor .col:nth-child(2) {width: 8.4rem;//第二列调整这个大小可以调整列宽/* 不换行 一行省略*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.monitor .col:nth-child(3) {width: 3.5rem;//第三列调整这个大小可以调整列宽}
4.2滚动时间调整
目前是十秒，可以根据自己的需求调整
/* 调用动画 */
.monitor .marquee {/* //infinite永久调用动画 */animation: row 10s linear infinite;
}
5.源码下载
【博主推荐】html好看的列表滚动效果（源码）
更多推荐
【博主推荐】html好看的列表滚动效果（附源码）
发布评论