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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
Jquery使用val方法读写value值
May 18 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
如何使用Javascript中的this关键字
May 28 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
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
大专生的学习自我评价
2013/12/04 职场文书
新书发布会策划方案
2014/06/09 职场文书
语文复习计划
2015/01/19 职场文书
北京颐和园导游词
2015/01/30 职场文书
员工升职自荐信
2015/03/27 职场文书
情感电台广播稿
2015/08/18 职场文书
2015年店长个人工作总结
2015/10/23 职场文书