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之水平横向滚动歌词同步的应用
May 07 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
七个很有意思的PHP函数
May 12 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
react中hook介绍以及使用教程
Dec 11 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 图片水印类代码
2012/08/27 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
深入理解ES7的async/await的用法
2017/09/09 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python Django搭建网站流程图解
2020/06/13 Python
详解Flask前后端分离项目案例
2020/07/24 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
人事部主管岗位职责
2013/12/26 职场文书
实习鉴定评语
2014/01/19 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
写给老婆的检讨书
2014/02/21 职场文书
旷课检讨书范文
2015/01/27 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
杜甫草堂导游词
2015/02/03 职场文书
征求意见函
2015/06/05 职场文书
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL