数字滚动

作者：曹え 5811
发布时间：2022-01-18 08:28:52
浏览次数：310

代码

<!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">

@media (min-width: 1025px) {
				html {
					font-size: 30px !important;
				}
			}

@media (min-width: 1440px) {
				html {
					font-size: 34px !important;
				}
			}

@media (min-width: 1680px) {
				html {
					font-size: 40px !important;
				}
			}

@media screen and (max-width: 769px) {
				html {
					font-size: 30px !important;
				}
			}

body {
				height: 200vh;
			}

.wp {
				max-width: 1400px;
				width: 100%;
				margin: 0 auto;
			}

.commPadding {
			 
				padding: 2rem 0;
				background: #fff;
				overflow: hidden;
				padding-bottom: 3rem;
			
			}

.index-title {
				text-align: center;
				margin: 0 0 .75rem;
				font-size: .75rem;
				line-height: 2;
				font-weight: bold;
				color: #121212;
				color: #00327f;
			}

.comm-txt {
				width: 100%;
				font-size: .4rem;
				line-height: 1.65;
				text-align: justify;
			}

.comm-txt p {
				margin: 0 0 .375rem;
				font-size: .4rem;
				color: #000;
			}

.data-list {
				width: 100%;
				margin: 1rem auto;
				text-align: center;
			}

.data-list span {
				position: relative;
				display: block;
				float: left;
				width: 25%;
				font-size: .4rem;
				color: #666;
			}

.data-list span label {
				position: relative;
				font-size: 1.8rem;
				font-weight: 100;
				font-family: 'DisneyEnglish', arial;
			}

/* @media screen and (min-width: 1024px) and (max-width: 1440px){
		.data-list span label {
		    font-size: 54px;
		}
		.data-list span label:after {
		    font-size: 24px;
		    right: -30px;
		    top: -10px;
		}
	} */
			.data-list span em {
				display: block;
				font-style: normal;
				font-size: .4rem;
			}

.data-list span:after {
				content: '';
				width: 1px;
				height: 70%;
				background: #ddd;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

.data-list span label:after {
				content: "+";
				font-size: 1rem;
				font-weight: 100;
				position: absolute;
				right: -1.25rem;
				top: -.5rem;
			}

.data-list span:last-child label:after {
				content: '';
			}

.data-list span:last-child:after {
				display: none;
			}

@media screen and (max-width: 1024px) {
				.data-list span {
					width: 50%;
				}
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<div class="commWidget commPadding bgGray2">
				<div class="wp">
					<div class="index-title home-center wow fadeInDown animated">我们的实力<i></i></div>
					<div class="comm-txt">
						<p class="home-center">
							连续20多年被政府工商管理部门授予“重合同、守信用”企业，银行资信等级“AAA”，A级纳税信用等级企业，公司总部设置13个职能部门，下设区域分公司、项目部专业分、子公司、厂共计38个二级单位。
						</p>
					</div>
					<div class="data-list">
						<span><label class="counter-demo-1" data-to="90" data-speed="1000">100</label><em>拥有逾百项专利授权</em></span>
						<span><label class="counter-demo-2" data-to="542" data-speed="1000">600</label><em>超600名全国体系员工</em></span>
						<span><label class="counter-demo-3" data-to="27" data-speed="1000">30</label><em>工程已覆盖全国30余省市地区</em></span>
						<span><label class="counter-demo-4" data-to="6" data-speed="1000">7</label><em>链接7个国家，未来将覆盖更多地区</em></span>
					</div>
				</div>
			</div>

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

</body>
</html>

预览[刷新]

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