最簡單實用的JQuery實現banner圖中的text打字動畫效果！

下面，就讓小博詳細介紹如何實現上面GIF實現的banner圖中的文字動畫效果，最簡單實用的方法（鑒於代碼量較小，就內嵌在一個HTML文件中了）：

首先，我們要在header導入一個jQuery，並新建一個CSS標籤，在body部分建立一個外層的div，取一個ID，裡面再建立一個內層的div，取一個ID，內層div里，新建一個h1標籤和一個p標籤，將您顯示的文字放到裡面，示例代碼如下:

下面，在CSS標籤中修改body部分的布局樣式，小博使用了簡單有效的彈性布局來實現的，效果圖及代碼如下：

代碼如下，注意布局完成之後要先將p標籤none掉:

接下來在body的裡面，新建一個JS標籤，利用定時器和延時器來實現banner中的文字動畫效果:

主要有兩點:

1：聲明一個函數，傳入兩個參數 元素：element ； 速度：speed。

定義：①var text = $(element).text();

②$(element).html("");

③var i = 0;

此函數取到了，全局的text，利用延時器延遲出現每個字元，但是h1標籤會和

2：利用延時器，將h1和p標籤，延時分別列印，即將h1標籤的文字，列印完成之後，再執行p標籤的列印工作；

定義：①定義 var speed = 75 (數值可以自己定義)；

② 定義一個變數 var delay = $("h1").text().length * speed ;------------取到h1列印完成的時間

③ 定義p標籤的一個延時器，延時時間即為h1標籤的列印完成時間，這裡不要忘記把CSS中none掉的p標籤，取到display，設為inline-block；

④ 將列印速度通過函數傳參，分別將speed賦給h1和p標籤；

JS完整代碼如下：

那麼，一個簡單實用的banner圖的文字動畫效果，就完成了。

2017優就業就業促進計劃：https://www.ujiuye.com/zt/jycj/?wt.bd=zt36716tt

中公教育「勤工儉學計劃」，給你一個真正0元學習IT的機會！

https://www.ujiuye.com/zt/qgjx/?wt.bd=zt36716tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！