Javascrpit特效之打字机效果
2018-06-30 02:19
134 查看
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 = "_";//新闻前面下标符1 theWidgetTwo = "-";//新闻前面下标符 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.onload=startTicker;
阅读更多
相关文章推荐
- JS特效之打字机效果
- android图片特效处理之模糊效果
- flash特效原理:图片滑动放大效果(2)
- javaScrpit基本功能
- 菜单导航 纯CSS3液态胶合效果的环形菜单按钮特效
- Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)
- 高级UI特效之仿3D翻转切换效果
- Canvas时钟特效-JS效果
- 防人人网客户端侧滑效果,简单实现Android滑动菜单特效
- javascript特效实现――当前时间和倒计时效果的简单实例
- 【前端】特效-Javascript实现购物页面图片放大效果
- javascript之textarea打字机效果提示代码推荐
- CSS特效——有趣儿的鼠标模糊效果
- 3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效
- 关于android系统图像特效处理之锐化效果
- 【js特效】批量产品图左右切换效果
- opencv特效编辑之雕刻效果
- NGUI添加一些特殊的效果(打字机。。)
- Flash 特效原理:震动效果
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果