如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。
效果图:
实现思路:
首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数,循环段落总字数来实现一个字一个字的输出。
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;
-
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务