如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
今天來看看怎么實(shí)現(xiàn)炫酷的打字機(jī)效果。即把一段話一個(gè)字一個(gè)字的顯示出來。
效果圖:
實(shí)現(xiàn)思路:
首先規(guī)定好顯示字?jǐn)?shù)的速度即settimeout執(zhí)行間隔用來控制每個(gè)字之間輸出速度。再把判斷段落的總字?jǐn)?shù),循環(huán)段落總字?jǐn)?shù)來實(shí)現(xiàn)一個(gè)字一個(gè)字的輸出。
js代碼:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
theCharacterTimeout = 50;
-
-
-
-
-
theNewsNum = document.getElementById("incoming").children.AllNews.children.length;
-
theAddNum = document.getElementById("incoming").children.AddNews.children.length;
-
totalNum =theNewsNum+theAddNum;
-
-
-
-
-
-
-
-
-
-
if(CurrentPosion<theNewsNum){
-
-
-
-
-
-
-
if(CurrentPosion>=totalNum||CurrentPosion>=1){
-
-
-
-
if(theCurrentLength != theNewsText.length){
-
-
-
-
-
-
-
-
function setupNextNews(){
-
-
theCurrentNews = theCurrentNews % theNewsNum;
-
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
-
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
-
-
document.all.hottext.href = theTargetLink;
-
-
-
function setupAddNews() {
-
-
theCurrentNews = theCurrentNews % theAddNum;
-
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
-
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
-
-
document.all.hottext.href = theTargetLink;
-
-
-
-
-
-
if((theCurrentLength % 2) == 1){
-
-
-
-
-
-
document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
-
-
setTimeout("runTheTicker()", theCharacterTimeout);
-
-
-
-
document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
-
-
setTimeout("runTheTicker()", theNewsTimeout);
-
-
window.onload=startTicker;
-
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)