jQuery实现立体式数字滚动条增加效果
更新时间:2016年12月21日 08:54:41 作者:以茜为贵
这篇文章主要介绍了jQuery立体式数字滚动条增加的相关资料,代码简单易懂,非常不错,需要的朋友可以参考下
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滚动条插件slimScroll使用方法
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
- jQuery实现滚动条滚动到子元素位置(方便定位)
- 利用jquery禁止外层滚动条的滚动
- jQuery中Nicescroll滚动条插件的用法
- jQuery判断是否存在滚动条的简单方法
- jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
- jQuery实现将div中滚动条滚动到指定位置的方法
- vue中如何引入jQuery和Bootstrap
- bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
- Jquery与Bootstrap实现后台管理页面增删改查功能示例
- 利用jquery和BootStrap实现动态滚动条效果
相关文章
浅谈jquery采用attr修改form表单enctype不起作用的问题
下面小编就为大家带来一篇浅谈jquery采用attr修改form表单enctype不起作用的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11
jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。2010-05-05
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
本篇文章主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2017-03-03
jquery.autocomplete修改实现键盘上下键自动填充示例
根据需求要实现通过键盘上下移动,获得联想菜单中的值,如同google baidu的查询功能,下面的代码是自己手写的,喜欢的朋友可以尝试操作下2013-11-11


最新评论