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