数字滚动

作者：曹え 5811
发布时间：2022-01-21 03:07:56
浏览次数：324

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>模块名称</title>
		<meta name="renderer" content="webkit">
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

<style>
			.m-shuju {
				margin-top: 30px;
				padding: 40px 0 30px;
				background: url(https://picsum.photos/id/83/300/150) no-repeat center;
				background-size: cover;
				margin-bottom: 145px;
			}

.m-shuju ul {
				overflow: hidden;
			}

.m-shuju li {
				float: left;
				width: 25%;
				text-align: center;
			}

.m-shuju div {
				margin-bottom: 10px;
			}

.m-shuju strong {

font-size: 50px;
				color: rgb(255, 255, 255);
				line-height: 1;
				margin-right: 20px;
			}

.m-shuju span {
				font-size: 40px;
				color: rgb(255, 255, 255);
				line-height: 1;
			}

.m-shuju sup {
				font-size: 20px;
				color: rgb(255, 255, 255);
				line-height: 1;
			}

.m-shuju p {
				font-size: 16px;
				color: rgb(255, 255, 255);
				line-height: 1.541;
			}

.wp {
				max-width: 1280px;
				margin: 0 auto;
			}

@media only screen and (max-width: 1600px) and (min-width: 950px) {
				.wp {
					max-width: 80vw;
					margin: 0 auto;
				}

.m-shuju {
					padding: 40px 0 30px;
				
					background-size: cover;
					margin-bottom: 145px;
				}

.m-shuju ul {
					overflow: hidden;
				}

.m-shuju li {
					float: left;
					width: 25%;
					text-align: center;
				}

.m-shuju div {
					margin-bottom: 10px;
				}

.m-shuju strong {

font-size: 50px;
					color: rgb(255, 255, 255);
					line-height: 1;
					margin-right: 20px;
				}

.m-shuju span {
					font-size: 40px;
					color: rgb(255, 255, 255);
					line-height: 1;
				}

.m-shuju sup {
					font-size: 20px;
					color: rgb(255, 255, 255);
					line-height: 1;
				}

.m-shuju p {
					font-size: 16px;
					color: rgb(255, 255, 255);
					line-height: 1.541;
				}
			}

@media only screen and (max-width: 950px) and (min-width: 0px) {

.wp {
					margin: 0 auto;
					padding: 0 20px;
				}

.m-shuju {
					padding: 4.210vw 0 3.157vw;
				
					background-size: cover;
					margin-bottom: 45px;
				}

.m-shuju ul {
					overflow: hidden;
				}

.m-shuju li {
					float: left;
					width: 50%;
					text-align: center;
				}

.m-shuju div {
					margin-bottom: 10px;
				}

.m-shuju strong {

font-size: 32px;
					color: rgb(255, 255, 255);
					line-height: 1;
					margin-right: 20px;
				}

.m-shuju span {
					font-size: 22px;
					color: rgb(255, 255, 255);
					line-height: 1;
				}

.m-shuju sup {
					font-size: 20px;
					color: rgb(255, 255, 255);
					line-height: 1;
				}

.m-shuju p {
					display: none;
					font-size: 1.684vw;
					color: rgb(255, 255, 255);
					line-height: 1.541;
				}
			}
		</style>
	</head>

<p>境内外企业参观</p>
					</li>
					<li>
						<div>
							<strong class="time" data-from="0" data-to="70000" data-speed="1000"
								data-refresh-interval="50">70000</strong>
							<span>人</span>
						</div>
						<p>多达70000</p>

</ul>
			</div>
		</div>
		<script src="https://h5.org.cn/js/jquery.num.js" type="text/javascript"></script>
		<script>
			//数字滚动
			$("strong").each(count);
		</script>
	</body>
</html>

预览[刷新]

320 360 460 768 960 1024 1280 1366 1460 1680 75% 全屏