JQuery/PHP

jQuery 制作动态数字翻滚计数到指定数字效果

阿里云

现在很多的网站上会有数字展示,为了让效果看起来更加高大上,会让这些数字变化展示,数字翻滚计数到指定数字。效果如下图:
jQuery 制作动态数字翻滚计数到指定数字效果
下面介绍一下这种动态数字翻滚计数到指定数字效果的制作方法。

第一步:下载数字翻滚计数必须的 JS 文件:shu.js

也想出现在这里?联系我们
创客主机

第二步:上传 shu.js 到自己主机,然后在自己的网站上引入 shu.js,使用以下的代码来引入。(注意文件路径)

  1. <script src="js/shu.js"></script>

第三步:在显示数字的位置,使用以下的代码来显示变化的数字。

  1. <span class="timer count-title" id="count-number" data-to="100" data-speed="1500"></span>

data-to="100":代表最终显示的数字

data-speed="1500":代表变化的速度

这样显示的数字就会是变化翻滚的了。

jQuery 制作动态数字翻滚计数到指定数字效果

已有 149 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!