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写的一个自定义弹出式对话框代码
Jan 17 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
详解redux异步操作实践
Aug 15 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
jQuery Ajax使用实例
2015/04/16 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python内置函数OCT详解
2016/11/09 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
HTML5标签小集
2011/08/02 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
小学运动会口号
2014/06/07 职场文书
运动员口号
2014/06/09 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
文明社区申报材料
2014/08/21 职场文书
个人委托书范本汇总
2014/10/01 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
pandas中pd.groupby()的用法详解
2022/06/16 Python