基于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)下載相應的版本,引用的時候加入相應的目錄就可以了
接下來就是在script標簽中添加代碼實現(xiàn)文字的動態(tài)效果了,先上代碼
<script>
$(dcument).ready(function(){
typing();
})
var text;//p標簽里對應的字符串
var index = 0;//text字符串的下標
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 ? "_" : " ")呢,當然是為了打印的動態(tài)效果了,當下標index為奇數(shù)的時候最后一個字符顯示為"_",當為偶數(shù)的時候顯示" ",這樣就能形成打印文字的那種動態(tài)效果。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ASP.NET jQuery 實例10 動態(tài)修改hyperlink的URL值
這節(jié)我們來看下如何實現(xiàn)通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別2012-02-02
本篇文章主要是對jquery遍歷select元素的實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jquery實現(xiàn)簡單手風琴菜單效果的方法,實例分析了jQuery操作頁面樣式、html頁面布局及SCSS樣式設置的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JQuery特殊效果和鏈式調(diào)用操作,結(jié)合實例形式分析總結(jié)了jQuery各種常見顯示效果與所使用的函數(shù),以及鏈式調(diào)用顯示層級菜單功能相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效
本文給大家分享的是一款基于jQuery插件expander實現(xiàn)圖片翻轉(zhuǎn)特效，一共有6種不同的圖片翻轉(zhuǎn)樣式，十分的炫酷，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了jQuery數(shù)據(jù)緩存用法,較為詳細的分析了jQuery數(shù)據(jù)緩存的功能、定義與相關(guān)的使用技巧,需要的朋友可以參考下2015-02-02
jQuery實現(xiàn)氣球彈出框式的側(cè)邊導航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)氣球彈出框式的側(cè)邊導航菜單效果,通過css樣式控制結(jié)合jQuery響應鼠標事件動態(tài)切換元素樣式實現(xiàn)提示框效果,非常美觀實用,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JQ實現(xiàn)新浪游戲首頁幻燈片,需要的朋友可以參考下2015-07-07
事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層2014-07-07
今天遇到個問題，在dialog中放了服務器端的空間dropdownlist，但是寫selectindexchange事件卻怎么也觸發(fā)不了，然后就在網(wǎng)上搜，終于看到有個哥們解決了這個問題，真的謝謝他。2010-12-12