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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
PHP字符串处理的10个简单方法
2010/06/30 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python实现矩阵乘法的方法
2015/06/28 Python
简单实现python聊天程序
2018/04/01 Python
python获取代码运行时间的实例代码
2018/06/11 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
django使用多个数据库的方法实例
2021/03/04 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
会计自我鉴定
2014/02/04 职场文书
大专生自荐书范文
2014/06/22 职场文书
作风大整顿心得体会
2014/09/10 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
公务员个人总结
2015/02/12 职场文书
财务会计求职信范文
2015/03/20 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android