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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
asm.js使用示例代码
Nov 28 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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 魔术方法使用说明
2009/10/20 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
js实现消息滚动效果
2017/01/18 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
python实现的文件夹清理程序分享
2014/11/22 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
行政助理岗位职责
2013/11/10 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
奥林匹克的口号
2014/06/13 职场文书
应届生自荐书
2014/06/23 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
大学生党员个人总结
2015/02/13 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
幼儿园辞职信
2015/05/13 职场文书
python实现简单聊天功能
2021/07/07 Python