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

最新推荐文章于 2024-08-14 09:46:38 发布
最新推荐文章于 2024-08-14 09:46:38 发布
阅读量8.8k 收藏 44
点赞数 9
分类专栏： HTML5实战案例 资源源码 文章标签： 前端 html 列表滚动 列表动画
BY xcSharp@126.com
本文链接：https://blog.csdn.net/weixin_43151418/article/details/124888548
版权
本文介绍了如何使用HTML、CSS和JavaScript实现一个美观的列表滚动效果，包括上下无缝衔接、鼠标悬停停止滚动和多列表滚动功能。提供了具体的代码示例、引用方式以及常见问题的解决方案，如列宽和滚动时间的调整。
摘要由CSDN通过智能技术生成

文章目录

【博主推荐】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
关注
专栏目录
博主推荐html好看的列表滚动效果（源码）
05-20
【博主推荐】html好看的列表滚动效果（附源码） - 功能实现 >1.实现列表滚动，上下无缝衔接； >2.实现鼠标悬浮停止滚动； >3.实现多列表滚动;
自定义滚动条样式
weixin_51679573的博客
11-30 234
自定义滚动条样式
JavaScript+HTML5+CSS实现精美好看的Todolist清单（附完整源码）
最新发布
2301_78961159的博客
08-14 798
大家应该能看到我上面两张图的颜色是不同，其实我是用了随机颜色来展示这个标题的，下面是实现这个功能的JavaScript代码，这里主要用十六进制颜色表示，通过随机数获得随机的颜色//设置随机颜色标题i < 6;i++) {这里是css代码0% {70% {100% {.title {
【SWT】滚动容器实现商品列表样式
小子宝丁的博客
07-19 315
依赖 `ScrolledComposite` ，`Rowlayout` ， `GC` 实现了一个滚动容器，该容器支持纵向滚动，横向自动适配填充。适合用于类似与商品列表等展示的场景。
html js实现列表自动滚动
蔡燃的博客
02-14 3404
1.列表滚动js /* 蔡燃 列表自动滚动 v1.0.0 备注：需要jquery*/ /** * 列表自动滚动 * @param data 列表数据 * @param el 列表绑定的元素 * @param options 配置 */ function listRoll(data, el, options) { var defaults = { movePx: 1,//移动距离（px） moveTime: 20,//移动时间间隔(毫秒) .
html列表可滚动
walle的博客
12-28 9946
body{ background:#f0f0f0; } .img_celebrity_avatar{ width:80px; height:80px; vertical-align:middle; float:left; #border:1px solid green; } .div_celebrity_row{ width:300px; height:80px;
html自动滚动列表,html – CSS如何使滚动列表
weixin_39892481的博客
05-31 674
我正在尝试创建一个由标题组成的网页，并在标题栏中列出项目列表。我希望项目列表是可垂直滚动的。我也希望网页占据整个窗口，但不要更大。 currenlty我的问题是项目列表不可滚动，而是延伸到窗口的底部，这导致窗口是可滚动的。 css属性在html，body，头和列表项上应该是什么？doctype htmlhtmlheadlink(href="css/style.css" rel="styleshee...
HTML Table 列表滚动
c331043的专栏
11-24 1万+
参考地址 http://www1.qdfuns.com/article-5603914-1-1.html项目需求：从服务器获得数据在前台填充到Table 前端UI框架 layui http://www.layui.com/ 用了layui的数据表格代码。生成Table后前端简略结构如下 //html 结构 使tr内容进行滚动 <div class="divWarning"> <div cl
html 好看的列表组,列表组
weixin_31969199的博客
06-19 809
Navbar Template for Bootstrap默认的列表组默认的列表组默认的列表组带徽章的列表组 7带徽章的列表组12带徽章的列表组2带连接条目的列表组7带连接条目的列表组12带连接条目的列表组2定制列表组 7Dapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis inDapibus ac facilisis...
博主推荐html好看的年会抽奖(附源码)
05-31
html好看的年会抽奖，数据信息JSON格式，支持配置用户信息，也可以Ajax动态加载自己数据的API，有抽奖，暂停功能、支持背景音乐，主题选择，效果震撼。 介绍地址：...
个人博客网站html模板源码 v1.1
12-05
"下载说明.htm"可能包含详细的安装和使用指南，"易采源码下载说明.txt"可能是关于源码获取和使用的说明文档，"易采源码下载.url"是一个快捷方式，可能指向源码下载地址，而"H1"可能是模板的主HTML文件，可能包含整个...
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
html+css+javascript实现列表循环滚动示例代码
12-13
说明：设置时间定时，在规定的时间内替换前一个节点的内容 1、关键代码：javascript： 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById(“dome1”); var dome2=document.getElementById(“dome2”); var speed=50;//设置向上轮动的速度 dome2[removed]=dome1[removed];//复制节点 关键语句 func
个人博客网页设计html源码
09-22
本资源提供了“个人博客网页设计html源码”，这是一套适用于创建简单个人网站的HTML主题，适合那些希望展示自己作品、想法或日常生活的博主。 HTML是一种标记语言，用于创建网页的标准结构，通过不同的标签来告诉...
网站模板html5秀气清爽个人博客html源码模板.zip
11-13
综上所述，"网站模板html5秀气清爽个人博客html源码模板"是一个结合了HTML5语义化、CSS3美化和可能的JavaScript交互的综合项目，旨在为个人博主提供一个既美观又功能齐全的在线平台。通过深入理解并应用这些技术，你...
html自动滚动列表,HTML滚动显示信息列表代码
weixin_42245967的博客
05-31 2050
显示样式如下图：jQuery(function(){varscrtime;jQuery("#deantalk").hover(function(){clearInterval(scrtime);},function(){scrtime=setInterval(function(){varjqul=jQuery("#deantalkul");varliHeight=jqul.fi...
html列表自动滚动,html列表可滚动
weixin_39855186的博客
05-31 286
body{background:#f0f0f0;}.img_celebrity_avatar{width:80px;height:80px;vertical-align:middle;float:left;#border:1px solid green;}.div_celebrity_row{width:300px;height:80px;margin:8px;background:#eee;b...
HTML/CSS 一个非常漂亮的收藏列表样式
热门推荐
qq_38959715的博客
04-30 2万+
先上效果图: 收藏列表 代码部分一（HTML） <!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>Title</title> <script type="text/javascrip...
html自动滚动代码,html+css+javascript实现列表循环滚动示例代码
weixin_39649736的博客
05-30 455
说明：设置时间定时，在规定的时间内替换前一个节点的内容1、关键代码：javascript：复制代码代码如下:var dome=document.getElementById("dome"); //获取节点var dome1=document.getElementById("dome1");var dome2=document.getElementById("dome2");var speed=50...
定制Android滚动选择器实现图文效果源码
本文档详细介绍了如何在Android应用开发中实现一个自定义滚动选择器（PickerScrollView），用于模拟图片滚动效果。该组件是基于`View`类进行扩展，由`com.linzihui.widget.PickerScrollView`类定义，其主要功能是为...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xcLeigh

万水千山总是情，打赏两块行不行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值