jQuery实现立体式数字滚动条增加效果
作者:以茜为贵
这篇文章主要介绍了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实现动态滚动条效果