jQuery实现立体式数字滚动条增加效果


Posted in Javascript onDecember 21, 2016

jquery实现立体式数字滚动条增加效果,代码分为两部分,一部分位html结构另一部分属于js代码段,需要的朋友参考下吧!

1、html结构

<div class="numberRun1"></div>

2、js

<script type="text/javascript" src="js/digital_over.js" ></script>//引用
//这是自定义函数(需要在页面中进行调用)
<script>
  //数字滚动
  function digitalScroll(obj,n){
    var numRun = $(obj).numberAnimate({num:n, speed:2000, symbol:","});
    var nums = n;
    setInterval(function(){
      numRun.resetData(nums);
    },3000);
    var numWidth= $(obj).width();
    $(obj).find('.mt-number-animate').css('width',numWidth);
    $(obj).css('width','100%');
    $(obj).find('.mt-number-animate').css('margin','0 auto');
  }
  window.indexdigitalScroll=function(){
    digitalScroll($('.numberRun1'),1160518);
  }
</script>
<!--这是在页面中调用的方法-->
<script>
  $(function(){
    indexdigitalScroll();
    });
</script>

3、图片案例

jQuery实现立体式数字滚动条增加效果

以上所述是小编给大家介绍的jQuery实现立体式数字滚动条增加效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
小程序实现多列选择器
Feb 15 Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
详解Vue.js动态绑定class
Dec 20 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python异常处理操作实例详解
2018/05/10 Python
python中for用来遍历range函数的方法
2018/06/08 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
护理专业自我鉴定
2014/01/30 职场文书
面试通知短信
2015/04/20 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android