2018-6-25 seo達人
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
今天來看看怎么實現(xiàn)炫酷的打字機效果。即把一段話一個字一個字的顯示出來。
效果圖:
實現(xiàn)思路:
首先規(guī)定好顯示字數(shù)的速度即settimeout執(zhí)行間隔用來控制每個字之間輸出速度。再把判斷段落的總字數(shù),循環(huán)段落總字數(shù)來實現(xiàn)一個字一個字的輸出。
js代碼:
-
var theNewsNum;
-
var theAddNum;
-
var totalNum;
-
var CurrentPosion=0;
-
var theCurrentNews;
-
var theCurrentLength;
-
var theNewsText;
-
var theTargetLink;
-
var theCharacterTimeout;
-
var theNewsTimeout;
-
var theBrowserVersion;
-
var theWidgetOne;
-
var theWidgetTwo;
-
var theSpaceFiller;
-
var theLeadString;
-
var theNewsState;
-
function startTicker(){
-
// ------ 設(shè)置初始數(shù)值
-
theCharacterTimeout = 50;//字符間隔時間
-
theNewsTimeout = 2000;//新聞間隔時間
-
theWidgetOne = "_";//新聞前面下標(biāo)符1
-
theWidgetTwo = "-";//新聞前面下標(biāo)符
-
theNewsState = 1;
-
theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新聞總條數(shù)
-
theAddNum = document.getElementById("incoming").children.AddNews.children.length;//補充條數(shù)
-
totalNum =theNewsNum+theAddNum;
-
theCurrentNews = 0;
-
theCurrentLength = 0;
-
theLeadString = " ";
-
theSpaceFiller = " ";
-
runTheTicker();
-
}
-
// --- 基礎(chǔ)函數(shù)
-
function runTheTicker(){
-
if(theNewsState == 1){
-
if(CurrentPosion<theNewsNum){
-
setupNextNews();
-
}
-
else{
-
setupAddNews();
-
}
-
CurrentPosion++;
-
if(CurrentPosion>=totalNum||CurrentPosion>=1){
-
CurrentPosion=0;//最多條數(shù)不超過num_gun條
-
}
-
}
-
if(theCurrentLength != theNewsText.length){
-
drawNews();
-
}
-
else{
-
closeOutNews();
-
}
-
}
-
// --- 跳轉(zhuǎn)下一條新聞
-
function setupNextNews(){
-
theNewsState = 0;
-
theCurrentNews = theCurrentNews % theNewsNum;
-
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
-
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
-
theCurrentLength = 0;
-
document.all.hottext.href = theTargetLink;
-
theCurrentNews++;
-
}
-
function setupAddNews() {
-
theNewsState = 0;
-
theCurrentNews = theCurrentNews % theAddNum;
-
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
-
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
-
theCurrentLength = 0;
-
document.all.hottext.href = theTargetLink;
-
theCurrentNews++;
-
}
-
// --- 滾動新聞
-
function drawNews(){
-
var myWidget;
-
if((theCurrentLength % 2) == 1){
-
myWidget = theWidgetOne;
-
}
-
else{
-
myWidget = theWidgetTwo;
-
}
-
document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
-
theCurrentLength++;
-
setTimeout("runTheTicker()", theCharacterTimeout);
-
}
-
// --- 結(jié)束新聞循環(huán)
-
function closeOutNews(){
-
document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
-
theNewsState = 1;
-
setTimeout("runTheTicker()", theNewsTimeout);
-
}
-
window.onload=startTicker;
-
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)藍藍設(shè)計的小編 http://sillybuy.com