【博主推荐】html好看的列表滚动效果（附源码）

最新推荐文章于 2024-04-28 14:57:52 发布

置顶 xcLeigh

最新推荐文章于 2024-04-28 14:57:52 发布

阅读量8.4k

点赞数 9

分类专栏： HTML5实战案例资源源码文章标签：前端 html 列表滚动列表动画

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/124888548

版权

HTML5实战案例同时被 2 个专栏收录

119 篇文章 104 订阅

订阅专栏

资源源码

104 篇文章 93 订阅

订阅专栏

文章目录

【博主推荐】html好看的列表滚动效果介绍

【博主推荐】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好看的列表滚动效果（源码）

xcLeigh

关注

9
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
7
评论
【博主推荐】html好看的列表滚动效果（附源码）

【博主推荐】html好看的列表滚动效果（附源码）1.实现列表滚动，上下无缝衔接；2.实现鼠标悬浮停止滚动；
复制链接

扫一扫

专栏目录