js、jquery数字刷动数字滚动数字增长效果

前端第一帅哥

已于 2023-11-16 15:48:40 修改

阅读量335

点赞数 1

文章标签：前端 java javascript

于 2023-11-16 15:36:15 首次发布

本文链接：https://blog.csdn.net/h5sfather/article/details/134443131

版权

// ⚆_⚆  Ծ‸Ծ  ⚆_⚆  Ծ‸Ծ  ⚆_⚆  Ծ‸Ծ  ⚆_⚆  Ծ‸Ծ 85844841
class _m_up{constructor(e,t,n,i,s,l){this.visible=e,this.dom=t,this.num=n,this.time=i,this.size=s,this.color=l,this.visible&&this.showNum()}showNum(){var e=this.dom,t=this.num.split(""),n=this.time,i=this.size,s=this.color,l="";$.each(t,function(e,t){l+="."==t?`<div class="m_mUp in_to" mup-value="${t}" style="height: ${i}rem;overflow: hidden;">\n\t\t  \t<div style="transform: translateY(0rem);transition: ${n}s cubic-bezier(0.0, 0.1, 0.58, 1.0), text-shadow 150ms;width: 100%;height: 1000%;">\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">.</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">0</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">1</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">2</span>\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">3</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">4</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">5</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">6</span>\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">7</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">8</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">9</span>\n\t\t  \t</div></div>`:`<div class="m_mUp in_to" mup-value="${t}" style="height: ${i}rem;overflow: hidden;">\n\t\t  \t<div style="transform: translateY(-10%);transition: ${n}s cubic-bezier(0.0, 0.1, 0.58, 1.0), text-shadow 150ms;width: 100%;height: 1000%;">\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">.</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">0</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">1</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">2</span>\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">3</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">4</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">5</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">6</span>\n\t\t  \t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">7</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">8</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">9</span>\n\t\t  \t</div></div>`}),$("#"+e).html(l)}ci_Up(){var e=this.dom,t=this.num.split("");setTimeout(function(){$.each(t,function(t,n){var i=10*(parseInt(n)+1);$("#"+e).find(".m_mUp").eq(t).find("div").css("transform","translateY(-"+i+"%)")})},10)}ri_Up(){var e=this.dom,t=this.num.split(""),n=this.time,i=this.size,s=this.color,l="";$.each(t,function(e,t){l+="."==t?`<div class="m_mUp in_to" mup-value="${t}" style="height: ${i}rem;overflow: hidden;">\n\t\t\t\t<div style="transform: translateY(0rem);transition: ${n}s cubic-bezier(0.0, 0.1, 0.58, 1.0), text-shadow 150ms;width: 100%;height: 1000%;">\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">.</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">0</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">1</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">2</span>\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">3</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">4</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">5</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">6</span>\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">7</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">8</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">9</span>\n\t\t\t\t</div></div>`:`<div class="m_mUp in_to" mup-value="${t}" style="height: ${i}rem;overflow: hidden;">\n\t\t\t\t<div style="transform: translateY(-10%);transition: ${n}s cubic-bezier(0.0, 0.1, 0.58, 1.0), text-shadow 150ms;width: 100%;height: 1000%;">\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">.</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">0</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">1</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">2</span>\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">3</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">4</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">5</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">6</span>\n\t\t\t\t<span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">7</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">8</span><span style="display: block;text-align: center;color: ${s};font-size: ${i}rem;line-height: ${i}rem">9</span>\n\t\t\t\t</div></div>`}),$("#"+e).html(l),setTimeout(function(){$.each(t,function(t,n){var i=10*(parseInt(n)+1);$("#"+e).find(".m_mUp").eq(t).find("div").css("transform","translateY(-"+i+"%)")})},10)}}

页面引入上面文件

需要引入jquery并且配置好rem单位

使用方法

html

<div id="_mup" class="_mmup" style="display: flex;"></div>
<div id="_mup2" class="_mmup" style="display: flex;"></div>
<div id="_mup3" class="_mmup" style="display: flex;"></div>
<div id="_mup4" class="_mmup" style="display: flex;"></div>

js调用

// 是否显示 
// 参数分别是 id 数值 刷动时间 字体大小(rem) color
var mup1 = new _m_up(true,'_mup','2.9','1.8','1','red')
var mup2 = new _m_up(true,'_mup2','6.8','1.3','1','#fff')
var mup3 = new _m_up(false,'_mup3','152.68','1.3','0.6','rgba(255,255,255,0.5)')
var mup4 = new _m_up(true,'_mup4','152111','1.3','0.6','rgb(166,185,144)')

// 执行
mup1.ri_Up() // 可重复执行
mup2.ci_Up() // 执行一次
mup3.ri_Up()
mup4.ri_Up()

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/rem.js"></script>
	<body style="background-color: black;">
		
		<div id="_mup" class="_mmup" style="display: flex;"></div>
		<div id="_mup2" class="_mmup" style="display: flex;"></div>
		<div id="_mup3" class="_mmup" style="display: flex;"></div>
		<div id="_mup4" class="_mmup" style="display: flex;"></div>
		
		<div class="btn" style="cursor: pointer;width: 1rem;height: 0.55rem;line-height: 0.55rem;text-align: center;color: #fff;font-size: 0.2rem;border: 1px solid #fff;position: fixed;bottom: 0.5rem;right: 1rem;">
			begin
		</div>
	</body>
	<script type="text/javascript" src="js/mmUp.min.js"></script>
	<script>
		// 是否显示 id num time size-rem color
		var mup1 = new _m_up(true,'_mup','2.9','1.8','1','red')
		var mup2 = new _m_up(true,'_mup2','6.8','1.3','1','#fff')
		var mup3 = new _m_up(false,'_mup3','152.68','1.3','0.6','rgba(255,255,255,0.5)')
		var mup4 = new _m_up(true,'_mup4','152111','1.3','0.6','rgb(166,185,144)')
		
		$('.btn').click(function(){
			mup1.ri_Up() // 可重复执行
			mup2.ci_Up() // 执行一次
			mup3.ri_Up() // 可重复执行
			mup4.ri_Up() // 可重复执行
		})
	</script>
</html>