js如何实现数字滚动效果

JavaScript015

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

1、打开CorelDRAWX8软件,点击【文字工具】,在作图区拉出一个文本框,输入“梦幻设计师”字样。完成后,对文字的字体、大小、颜色等参数进行设置。

2、鼠标右键拉动复制一个文本,将内容改为“MHSJS001”字样。接着,对文字的字体、大小、颜色等参数进行设置。完成后,选中两个文本框,将其转化为曲线。

3、选中“梦幻设计师”字样,点击【立体化工具】,左上角方框中选择【立体左下】,做出立体效果。同样的步骤,给“MHSJS001”字样也做出立体效果。

4、点击【立体化颜色】,选择渐变颜色,分别给两立体字添加渐变颜色;点击【立体化照明】,选择一种合适的照射方式,分别给立体字打上灯光效果;

5、通过这样的方法,我们可以做出各种角度的立体字效果。完成后,给他加上一个暗色背景,然后将图导出即可。