您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)文字打印動態(tài)效果的具體代碼,供大家參考,具體內(nèi)容如下
主體html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印文字效果</title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> <script/> <head> <body> <p id="typing">The furthest distance in the world.Is not between life and death.But when I stand in front of you.Yet you don't know that I love you</p> </body>
對于JQuery的引用,可以先到JQuery官網(wǎng)下載相應(yīng)的版本,引用的時候加入相應(yīng)的目錄就可以了
接下來就是在script標(biāo)簽中添加代碼實(shí)現(xiàn)文字的動態(tài)效果了,先上代碼
<script> $(dcument).ready(function(){ typing(); }) var text;//p標(biāo)簽里對應(yīng)的字符串 var index = 0;//text字符串的下標(biāo) var id;//setTimeout()的返回值,用于關(guān)閉clearTimeout(id) function typing() { text = $("#typing").text(); $("#typing").text(""); $("#typing").show(); typed(); } result = ""; function typed(){ result += text.charAt(index); $("#typing").text(result + (index & 1 ? "_" : " ")); if(index < text.length - 1) { index++; id = setTimeout("typed()", 100); } else clearTimeout(id); } </script>
為什么顯示文字的時候是result+ (index & 1 ? "_" : " ")呢,當(dāng)然是為了打印的動態(tài)效果了,當(dāng)下標(biāo)index為奇數(shù)的時候最后一個字符顯示為"_",當(dāng)為偶數(shù)的時候顯示" ",這樣就能形成打印文字的那種動態(tài)效果。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。