用js實現自動打字動畫效果

2022-09-07 15:57:29 字數 551 閱讀 3513

準備自己寫乙個部落格,就先做了乙個自動打字的頁面demo,見到過用純css做的,但是靈活性不強,只能乙個個打字打完就完了,而用js的話可以來來回回反覆地打字,效果更好。

放一張效果圖,演示**:

思路其實很簡單,用setinterval()控制乙個迴圈,每隔一段時間顯示出乙個字,然後對其顯示的順序等進行控制即可。

**如下:

html

charset="utf-8">

autotypetitle>

rel="stylesheet"

type="text/css"

href="css/style.css">

head>

class="first-page">

id="first-default">this is

id="first-words">

p>

span>

div>

用js實現打字機效果

1.難得有點時間,回憶下古詩文,順便練習下js,實現下打字機效果 春江花月夜 張若虛 唐 春江潮水連海平,海上明月共潮生。灩灩隨波千萬里,何處春江無月明!江流宛轉繞芳甸,月照花林皆似霰 空裡流霜不覺飛,汀上白沙看不見。江天一色無纖塵,皎皎空中孤月輪。江畔何人初見月?江月何年初照人?人生代代無窮已,江...

js模擬打字效果

function pri function var char this.name this.i var go window.settimeout arguments.callee,100 在這裡arguments.callee妙用因為是匿名閉包,呼叫函式本身。建立class類 function in...

CSS 實現打字效果

原文 css 實現打字效果 最近做專案的時候需要實現乙個字元逐個出現的打字效果,在網上一搜有個不錯的jquery外掛程式typed.js,效果很讚 具體用法可以看看專案位址,帶注釋的原始碼200多行,不算複雜 實現方法也不神奇,大多數人肯容易可以想到,用js逐個向容器內新增字元,作者做了很多字元的出...