html 数字实现滚动的效果 到指定的数(使用countup.js插件)

html-css07

html 数字实现滚动的效果 到指定的数(使用countup.js插件),第1张

数字实现滚动的效果

<span id="num1">1000</span>

<script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script>

<script type="text/javascript">   

 var options = {     

 useEasing: true,      

useGrouping: true,      

separator: ',',      

decimal: '.', 

  }   

 var num1 = new CountUp('num1', 0, 1000, 0, 2.5, options)   

 if (!num1.error) {    

 num1.start()  

  } else {     

 console.error(num1.error) 

   }

</script>

//num1:目标元素的ID 

 //0:滚动开始的数字

//100:滚动结束的数字

//2.5 :完成整个效果的时间

<marquee>

向左移动

</marquee>

<marquee direction="right">

向右移动

</marquee>

<marquee direction="right" behavior="alternate">

来回移动

</marquee>

<marquee direction="right" loop="3">

移动3次

</marquee>

<marquee direction="right" scrollamount="1">

看我走多块(scrollamount=“值”)值越大,速度越快

</marquee>

<marquee direction="right" scrolldelay="1000">

看我走多块scrolldelay=“值”)1000毫秒=1秒 这是1秒移动一次

</marquee>

marquee>滚动文字

滚动文字

滚动文字

滚动文字

marquee

参数:

bgcolor:滚动文本框的背景颜色。

direction:滚动方向设置,可选择left、right、up和down。

scrolldelay:每轮滚动之间的延迟时间,越大越慢。

scrollamount:一次滚动总的时间量,数字越小滚动越慢。

behaviour:滚动的方式设置,三种取值:scroll(循环滚动)

lide(单次滚动)、alternate(来回滚动)。

align:文字的对齐方式设置。可选择middle(居中)、bottom(居下)还是top(居上)。

width:滚动文本框的宽度,输入一个数值后从后面的单选框选择in

pixels(按像素)或是in

percent(按百分比)。

height:滚动文本框的高度,输入一个数值后从后面的单选框选择in

pixels(按像素)或是in

percent(按百分比)。

loop:滚动次数。默认为infinite

hspace、vspace:前后、上下的空行。

下面这须代码是坚着滚动代码.

怎么可以改成让它横着滚动呢?

var

t=fffhoridiv.scrolltop

fffhoridiv2.innerhtml=fffhoridiv1.innerhtml

function

fffhorimarquee(){

if(fffhoridiv1.offsetheight

-fffhoridiv.scrolltop

<=2)

fffhoridiv.scrolltop

-=

fffhoridiv1.offsetheight

else

fffhoridiv.scrolltop

++

}

function

fffstarthorimarquee(){

fffhoritime

=

setinterval(fffhorimarquee,30)

}

function

fffstophorimarquee(){

clearinterval(fffhoritime)

}

fffstarthorimarquee()

//开始滚动

</script>

要给分哦