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 直接操作本地文件的实现代码
Dec 01 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
使用js画图之饼图
Jan 12 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
js实现简单的倒计时
Jan 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判断所处服务器操作系统的类型
2013/06/20 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
使javascript也能包含文件
2006/10/26 Javascript
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
浅析Python四种数据类型
2018/09/26 Python
python实现推箱子游戏
2020/03/25 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python运行DLL文件的方法
2020/01/17 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
英语分层教学实施方案
2014/06/15 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
《静夜思》教学反思
2016/02/17 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python