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 iframe的相互操作浅析
Oct 14 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 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 读取文件的正确方法
2009/04/29 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
PHP中怎样防止SQL注入分析
2014/10/23 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python中属性和描述符的正确使用
2016/08/23 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
团日活动总结报告
2014/06/25 职场文书
525心理活动总结
2014/07/04 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
顶岗实习协议书
2015/01/29 职场文书
行政助理岗位职责
2015/02/10 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python