js文字公升降效果

2022-08-19 03:27:10 字數 1181 閱讀 3666

其實這效果用css3的animation就能辦到,不過這裡就當熟悉js的操作吧!

效果圖如下:

html部分:

<

div

class

="box"

>

<

div

id="shengjiang"

>

<

p><

span

color

="#ff0"

>一行文字

span

>

p>

div>

div>

.box這層div可以不用加,這裡只是作為子絕父相的父元素罷了!當然,把遊覽器作為父元素也可以,只是想鑲嵌到其他div中就麻煩了。

css部分:

*.box#shengjiang
如果是css3,就直接換成以下的就好了。

*.box#shengjiang@keyframes mymove

50% 100%}

animation,css3的動畫屬性

mymove 定義的名稱,可自定義。

5s 一次需要的時間

infinite 迴圈反覆

@keyframes mymove 給上面定義的名稱新增動畫屬性。

即0%時所在位置,50%時所在位置,100%時所在位置。

0-100%之間可任意分隔。

top 是從0到200px再回到0;

js部分,雖說到這裡就已經達成效果了說……

var step = 4;

function anim(x,y)

if (x<0)

settimeout('anim('+(x+step)+','+y+')', 35); //

等待多少秒執行,所以數值越小速度就越快//}

anim(5,200);//

5只是初始位置,200才是整體的高度,至於如何確認最頂端,還要看if (x<0) 中的x<0中的0這個數值。

js文字從左邊飛入效果

貼 之前,我們先講一下它的原理,我們使用setinterval,讓文字一開始置於螢幕看不到的位置,左右上下都可以,然後讓它的位置不斷移入到螢幕看得到的位置。下面上 html js if document.getelementbyid document.all var crossheader docu...

JS小案例 文字切換效果

下面是乙個文字切換效果的小案例,希望可以可以幫助到有需要的小夥伴 lang en charset utf 8 name viewport content width device width,initial scale 1.0 文字切換效果title head container style spe...

js實現逐字列印效果,文字逐字顯示

本文介紹的是利用js實現文字逐步顯示的效果,簡單的說,就是文字乙個字乙個字的顯示出來,就像列印一樣。doctype html html head title js實現逐字列印效果,文字逐字顯示 title style type text css body text style head body p...