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中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
vscode 调试 node.js的方法步骤
Sep 15 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
Search Engine Friendly的URL设计
2006/10/09 PHP
支持oicq头像的留言簿(一)
2006/10/09 PHP
来自PHP.NET的入门教程
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
php 中文和编码判断代码
2010/05/16 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php中in_array函数用法分析
2014/11/15 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python常见的pandas用法demo示例
2019/03/16 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python logging设置和logger解析
2019/08/28 Python
Pytorch之finetune使用详解
2020/01/18 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
当当网软件测试笔试题
2015/11/24 面试题
党员实事承诺书
2014/03/26 职场文书
2014年英语工作总结
2014/12/20 职场文书
保送生自荐信范文
2015/03/26 职场文书
MySQL基础(二)
2021/04/05 MySQL
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android