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

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

• 功能实现

1.实现列表滚动，上下无缝衔接；
2.实现鼠标悬浮停止滚动；
3.实现多列表滚动;

• 使用技术

html + css + js

1.界面效果示例

1.1单列表效果

1.2多列表效果

2.html中body代码

	

		

			

				

					我是第一
					我是内容
					我是时间
				
				

					

						

							北上广1
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广2
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广3
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广4
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广5
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广6
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广7
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广8
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广9
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
						

							北上广10
							思念是条长长的眼线，一闭上眼就蔓延出泪滴涟涟
							20220520
							
						
					
				
			
		
	
  

3.引用方式

3.1.嵌套在自己的界面代码

//根据实际大小调整最外层大小


//调整这个样式宽高可以调整真个列表的大小
.monitor{
	width:100%;
	height:100%;
	position:absolute;
  }

3.2.通过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好看的列表滚动效果（源码）