基于jQuery實(shí)現(xiàn)文字打印動(dòng)態(tài)效果
更新時(shí)間：2017年04月21日 08:52:20 作者：mmklzmant
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)文字打印動(dòng)態(tài)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)文字打印動(dòng)態(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>
對(duì)于JQuery的引用,可以先到JQuery官網(wǎng)下載相應(yīng)的版本,引用的時(shí)候加入相應(yīng)的目錄就可以了
接下來(lái)就是在script標(biāo)簽中添加代碼實(shí)現(xiàn)文字的動(dòng)態(tài)效果了,先上代碼
<script>
$(dcument).ready(function(){
typing();
})
var text;//p標(biāo)簽里對(duì)應(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>
為什么顯示文字的時(shí)候是result+ (index & 1 ? "_" : " ")呢,當(dāng)然是為了打印的動(dòng)態(tài)效果了,當(dāng)下標(biāo)index為奇數(shù)的時(shí)候最后一個(gè)字符顯示為"_",當(dāng)為偶數(shù)的時(shí)候顯示" ",這樣就能形成打印文字的那種動(dòng)態(tài)效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery事件綁定和委托,以實(shí)例形式分析了jQuery事件綁定和委托中on()、bind()、live()、delegate()的用法,具有一定的學(xué)習(xí)與借鑒價(jià)值,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了jQuery實(shí)現(xiàn)字符串全部替換的方法,結(jié)合實(shí)例形式對(duì)比分析了使用Replace進(jìn)行替換的方法及使用正則進(jìn)行全部替換的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索
這篇文章主要為大家詳細(xì)介紹了jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了jQuery中:eq()選擇器用法,實(shí)例分析了:eq()選擇器的功能、定義及匹配指定索引值元素時(shí)的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
通過(guò)jQuery源碼學(xué)習(xí)javascript(二)
昨天寫(xiě)了篇通過(guò)jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒(méi)有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來(lái)我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享2012-12-12
終于把jQuery拼寫(xiě)正確了哈，哈哈javascript也是區(qū)分大小寫(xiě)的,所以確實(shí)不能寫(xiě)錯(cuò)，今天我來(lái)和大家分享的是日期選擇控件的實(shí)現(xiàn)，功能也許不夠強(qiáng)大，但是能夠滿足需求。2009-10-10
在使用jquery操作js時(shí)，經(jīng)常整不明白this與$(this)。抽空仔細(xì)測(cè)試了一把，記錄下來(lái)以供在忘記的時(shí)候拉出來(lái)參考參考！2010-09-09
基于jquery的一個(gè)拖拽到指定區(qū)域內(nèi)的效果
這兩天一直在整這個(gè)拖拽的效果，既然學(xué)習(xí)就要把一個(gè)特效的各個(gè)方面考慮周全，這樣才學(xué)到真正的知識(shí)?？刹?，又整理了一個(gè) 拖拽的特效。2011-09-09
jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格行數(shù)據(jù)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
只需將js引用并設(shè)置下變量就行了，但一直沒(méi)搞明白原理，這次弄清了如何傳遞、設(shè)置多個(gè)（很多個(gè)）參數(shù)，如果你也不明白可以看看2014-10-10