Skip to content

基于jQuery的数字滚动效果插件:一个div即可实现数字滚动

Notifications You must be signed in to change notification settings

Chef5/jQuery.rollNumber

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

jquery.rollNumber

在网上没有找到一个理想效果的数字滚动,就自己写了一个,并整理了一下

tjPEuR.gif

demo

<!-- 简单demo -->
<div class="number-normal">
    <div class="data"></div>
</div>

<!-- 深度自定义demo -->
<div class="number-diy">
    <div class="data" data-number="21468159"></div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.rollNumber.js"></script>
<script src="js/main.js"></script>

简单demo:

$('.number-normal .data').rollNumber({
  number: 123456,   //必需:显示数据
  // speed: 100,    //可选:每个数字滚动时长,取值"slow"、"fast" 或毫秒,默认:500
  // interval: 100, //可选:前后两个数字间隔时长,毫秒,默认:100
  // rooms: 9,      //可选:显示总位数,需大于等于数据长度,大于数据长度时前面补0,默认:等于数据长度
  // space: 90,     //可选:每个数字宽度,默认为:高度/2
  // symbol: ',',   //可选:千分位占位符,默认:false
  fontStyle: {      //可选:数字字体样式
    'font-size': 100,    //可选:默认14
    color: '#FF0000',    //可选:默认black
    // 其他文字样式,标准css均可以设置
    // 'font-family': 'LetsgoDigital',
    // 'font-weight': 700
  }
})

深度自定义demo:

/*
* 内部样式结构:._number > div > div > span
* 该demo在css中,自定义了内部 ._number和span的样式
*/
$diy = $('.number-diy .data');
$diy.rollNumber({
  number: $diy[0].dataset.number, 
  speed: 500, 
  interval: 200,
  rooms: 9,
  space: 110,
  symbol: ',', 
  fontStyle: {
    'font-size': 102,
    'font-family': 'LetsgoDigital',
  }
})
._number {
  background: url(../img/n-bg.png) center no-repeat;
  background-size: 100% 100%;
}
._number span {
  background: linear-gradient(to bottom, #FEF1CD, #F9D16B);
  -webkit-background-clip: text;
  color: transparent !important;
}

About

基于jQuery的数字滚动效果插件:一个div即可实现数字滚动

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published