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":代表变化的速度

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

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

发表回复

热销模板

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

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

请扫码添加QQ好友后咨询!