jquery+css动画效果-数字跳动
jquery+css动画效果-数字跳动
·
效果演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字跳动</title>
<link rel="stylesheet" href="./numberScroll/scroll.css">
<style>
.hflex {display: flex;flex-direction: row;}
.rflex {display: flex;flex-wrap: wrap;}
.acenter {align-items: center;}
.jbetween {justify-content: space-between;}
html,body{
width: 100vw;
height: 100vh;
}
.main_center2{
width: 100%;
height: 15vh;
}
.main_center2 .center2_box{
width: 100%;
height: 13vh;
margin: 1vh 0;
background-image: url("./image/sides/car/boxBg.png");
background-size: 100% 100%;
}
.center2_box .center2_left{
width: 2vw;
margin-top: 0.6vh;
height: calc(100% - 0.6vh);
}
.center2_left .manIcon{
width: 1.5vw;
height: 4vh;
text-align: center;
line-height: 4vh;
background: rgba(16,74,111,.5);
border-bottom-left-radius: 0.5vh;
border-top-left-radius: 0.5vh;
color: #ffffff;
cursor: pointer;
}
.center2_box .amount_box{
width: 100%;
height: 4vh;
margin-top: 1vh;
}
.center2_left .manIconActive{
background: rgba(0,128,555,1);
}
.center2_left .amounIcon{
width: 30vw;
height: 4vh;
text-align: center;
line-height: 4vh;
color: #ffffff;
cursor: pointer;
margin-right: 1vw;
font-size: 1.5vh;
}
.center2_left .amounIconActive{
background: url("./image/sides/car/amountBg.png");
background-size: 100% 100%;
}
.center2_box .amount_right{
width: 21vw;
margin-left: 1vw;
height: calc(100% - 5vh);
}
.center2_box .center2_right{
width: 21vw;
margin-left: 1vw;
height: 100%;
}
.center2_right .title{
width: 100%;
height: 3vh;
line-height: 3vh;
margin-top: 1vh;
color: #ffffff;
}
.center2_right .flowBox{
width: 50vw;
height: calc(100% - 4vh);
}
.flowBox .flow{
width: 50vw;
height: 9vh;
}
.number-box{
padding-top: 0.5vh;
}
.flow .flowItem{
width: 11vw;
height: 9vh;
text-align: center;
line-height: 9vh;
font-family:'numberFont' ;
font-size: 5vh;
color: #5df3fa;
margin-right: 0.2vw;
background-image: url("./image/sides/car/flowBg.png");
background-size: 100% 100%;
}
.flowBox .flow_right{
width:6vw;
margin-left: 1vw;
height: 8vh;
}
.flow_right .init{
width: 100%;
height: 4vh;
line-height: 4vh;
color: #ff8929;
}
.flow_right .out{
color: #5df3fa;
}
.init .label{
margin-left: 0.5vw;
margin-right: 0.5vw;
}
.init .num{
font-family:'numberFont' ;
font-size: 2.3vh;
}
</style>
</head>
<body>
<div class="main_center2 rflex jbetween">
<div class="center2_box hflex">
<div class="center2_left" id="surveyBtn">
<div data-href="man" class="manIcon manIconActive">
A
<i class="iconfont icon-fl-renyuan" style="font-size: 2.4vh"></i>
</div>
<div data-href="car" class="manIcon">
B
<i class="iconfont icon-iconfontzhizuobiaozhun02" style="font-size: 2vh"></i>
</div>
</div>
<div class="center2_right rflex" id="liuLiang">
<div class="title">园区人流量</div>
<div class="flowBox hflex acenter">
<div class="flow hflex">
<div class="number-box numberRun2"></div>
</div>
<div class="flow_right">
<div class="init hflex acenter">
<i class="iconfont icon-jinru"></i>
<div class="label">入</div>
<div class="num inNum">567</div>
</div>
<div class="init out hflex acenter">
<i class="iconfont icon-tuichu"></i>
<div class="label">出</div>
<div class="num outNum">6</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script src="./numberScroll/countNumber.js"></script>
<script src="./numberScroll/scrollNumber.js"></script>
<script>
getSurvey()
function getSurvey() {
//翻页效果
setNumberRun1(1561);
interval= setInterval(() => {
setNumberRun1(1561);
}, 5000);
$('#surveyBtn').on('click','.manIcon',function () {
var _id = $(this).data('href')
$(this).addClass('manIconActive').siblings().removeClass('manIconActive')
if(_id == 'man'){
$('#liuLiang').find('.title').html('园区人流量')
//翻页效果
clearInterval(interval)
setNumberRun1(1561);
interval= setInterval(() => {
setNumberRun1(1561);
}, 5000);
$('#liuLiang').find('.inNum').html('1567')
$('#liuLiang').find('.outNum').html('6')
}else{
$('#liuLiang').find('.title').html('园区车流量')
//翻页效果
clearInterval(interval)
setNumberRun1(276);
interval= setInterval(() => {
setNumberRun1(276);
}, 5000);
$('#liuLiang').find('.inNum').html('289')
$('#liuLiang').find('.outNum').html('13')
}
})
$('#surveyBtn1').on('click','.amounIcon',function () {
var _id = $(this).data('href')
$(this).addClass('amounIconActive').siblings().removeClass('amounIconActive')
if(_id == 'carAmount'){
let echartData = [
{
name: '停车数',
value: '700',
},
{
name: '离线数',
value: '300',
},
{
name: '行驶中',
value: '500',
}
];
amountBar(echartData)
}else{
let dataX= ['维保费用', '加油费用', '保险费用', '审车费用']
let dataY =[98, 38, 48, 35, 92, 28, 93, 85]
amountBar1(dataX,dataY)
}
})
}
//翻页效果
function setNumberRun1(num){
var numRun = $(".numberRun2").numberAnimate({
num: num,
dot: 0,
speed: 2000,
});
}
</script>
</body>
</html>
示例代码如下
https://download.csdn.net/download/henghahouhei/85760100
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)