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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
鼠标拖拽移动子窗体的JS实现
Feb 25 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
javascript 闭包详解
Jul 02 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
Vue.js基础知识小结
Jan 13 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
浅谈angular4生命周期钩子
Sep 05 Javascript
解决vue移动端适配问题
Dec 12 Javascript
js+css3实现简单时钟特效
Sep 13 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高手?学会“懒惰”的编程
2006/12/05 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
js实现网页收藏功能
2015/12/17 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python中List的sort方法指南
2014/09/01 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
详解Python中import机制
2020/09/11 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
英文留学推荐信范文
2014/01/25 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL