Javascrpit特效之打字机效果

今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。

效果图：

实现思路：

首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数，循环段落总字数来实现一个字一个字的输出。

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(){// ------ 设置初始数值theCharacterTimeout = 50;//字符间隔时间theNewsTimeout = 2000;//新闻间隔时间theWidgetOne =  "_";//新闻前面下标符1theWidgetTwo =  "-";//新闻前面下标符theNewsState = 1;theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新闻总条数theAddNum = document.getElementById("incoming").children.AddNews.children.length;//补充条数totalNum =theNewsNum+theAddNum;theCurrentNews = 0;theCurrentLength = 0;theLeadString = " ";theSpaceFiller = " ";runTheTicker();}// --- 基础函数function runTheTicker(){if(theNewsState == 1){if(CurrentPosion<theNewsNum){setupNextNews();}else{setupAddNews();}CurrentPosion++;if(CurrentPosion>=totalNum||CurrentPosion>=1){CurrentPosion=0;//最多条数不超过num_gun条}}if(theCurrentLength != theNewsText.length){drawNews();}else{closeOutNews();}}// --- 跳转下一条新闻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);}// --- 结束新闻循环function closeOutNews(){document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;theNewsState = 1;setTimeout("runTheTicker()", theNewsTimeout);}
window.οnlοad=startTicker;

Javascrpit特效之打字机效果相关推荐

html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
Vue3实现打字机效果
typeit 介绍 typeit是一款轻量级打字机特效插件.该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放.响应式等特点.官方文档安 ...
jq挑战30天——打字机效果+小程序
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
html动态散花代码,IOS实现签到特效(散花效果)的实例代码
本文讲述了IOS实现签到特效(散花效果)实例代码.分享给大家供大家参考,具体如下: 散花特效 #import /// 领取奖励成功 @interface RewardSuccess : NSObjec ...
CSS3特效 - 呼吸灯效果
CSS3特效 - 呼吸灯效果 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <head><meta http-equiv=&qu ...
cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js
本文同步发表在我的个人博客中: 沧沧凉凉www.cclliang.com 打字机效果是非常酷的文字显示效果,视觉表现极佳,而通过Typed.js可以很简单的在web开发中实现打字机效果. 1. 官网 ...
Gamemaker studio2经验（4）——打字机效果
问题概述在很多游戏中--算了实在不好意思写引言了,就直说啦.如果你是UT粉,想用gm搞搞UT的同人作品但是又无从下手,那么请看过来. 对于RPG类游戏,文字交流系统是不可或缺的,但是gm的文字系统- ...
MOGRT视频制作库 Premiere遮罩/转场/特效视频剪辑效果模板库预设
视频制作库 Premiere遮罩/转场/特效视频剪辑效果库 Premiere Pro CC |无需插件|可调整大小| 2.95 Gb 超过1000种专业预设和后效元素.视频库包含超过250种随时可用的 ...
如何实现文字逐个出现的打字机效果
嗨!大家好,我是小蚂蚁. 今天分享一下如何在微信小游戏制作工具中实现文字逐个出现的打字机效果,这个小功能可以用于游戏中的文字对白的展示,如果你要做的是一个文字类游戏的话,那么肯定用的上. 最终的效果如 ...

Javascrpit特效之打字机效果

Javascrpit特效之打字机效果

Javascrpit特效之打字机效果相关推荐

最新文章

热门文章