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 相关文章推荐
JavaScript 题型问答有答案参考
Feb 17 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
javascript实现Table排序的方法
May 15 Javascript
jquery使用经验小结
May 20 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python中的TCP socket写法示例
2018/05/11 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python生成器generator用法示例
2018/08/10 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
英语感恩演讲稿
2014/01/14 职场文书
学校安全教育制度
2014/01/31 职场文书
现金出纳岗位职责
2014/03/15 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
闪闪的红星观后感
2015/06/08 职场文书
食堂管理制度范本
2015/08/04 职场文书