js如何实现数字滚动效果

JavaScript018

js如何实现数字滚动效果,第1张

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、图片案例

根据你的具体情况,有两种思路。

第一种,类似于滑动效果,用强父元素,overflow:hidden了。然后通过点击左右的键,获取当前父元素的宽度,修改父元素css属性的left,注意,position:absolute时left才起作用。

第二种就比较简单。就是简单的隐藏,点击左右,隐藏第一屏的信息,再次点击,隐藏第一、第二屏的信息,依次类推,当最后一屏的时候,又开始显示第一屏的信息,这样就是循环了。可以用fadeIn()等方法来加入一些效果

思路就是这样,说起来麻烦,其实很简单、