本文通过实例来说明JavaScript文本特效。分享给大家参考，如下：

1.标题跑马灯

在一些新闻网站或其他地方，经常可以看到单词在特定区域来回滚动。一旦超出边界，就会消失，那么这些效果是如何工作的呢？今天我们将谈论它。

图形效果：

源代码：

！doctype html html head meta charset=' utf-8 ' style/style/head Body center font size=5 color=' ff 0094 '在标题栏上实现的pText ticker/p/font/center/Body脚本语言=' JavaScript' varmsg=' ' '这是使用JavaScript在标题栏上实现的文本ticker效果'；//加空格是为了让别人看清楚这段话，否则会跑得太快看不清楚。var区间=100；var maxlen=80var seq=maxlenvar len len=msg.length函数Scroll(){ document . title=msg . substring(seq，len)；seqif(seq=len){ seq=0；} window . settimeout(' Scroll()；'，间隔)；}滚动()；/script/html2，网页内容滚动条

本文介绍了一些常用的跑马灯效果，代码来自//www . JB 51 . net/article/8005 . htm。

效果图如下：

源代码：

！doctype HTML HTML Head metachartset=' UTF-8 ' Title joker Book/Title Script Language=' JavaScript ' var MES=New Array()；Mes[0]=“我们欢迎您！”；Mes[1]='感谢关注我们的教程'；Mes[2]='网页特效跑马灯效果大全'；var place=1；var I=0；函数scroll(){window.status=Mes[i]。子串(0，地点)；if (place=Mes[i]。长度){ if(I2){ I；place=1；window.setTimeout('scroll()'，50)；} else { I=0；place=1；window.setTimeout('scroll()'，50)；} } else { placewindow.setTimeout('scroll()'，50)；} }/script/head form name=' shot perform ' method=' get ' body on load=' scroll()；选取框滚动文本/选取框选取框行为=交替表示双向移动/选取框方向=向左表示移动方向向左/选取框选取框宽度=400行为=交替方向=左对齐=中间边框=1！/marquee marquee scroll mount=' 30 '表示移动方向向左/marquee marquee width=90% a href='//www . JB 51 . net ' target=_ blank ticker带超链接！命令我试试？/aa href=' http://www . Baidu.com ' rel=' external no follow ' target=_ blank，还有一个！命令我试试？/a/选框表格宽度=' 93% '边框=' 1 '单元格间距=' 0 '单元格填充=' 1 ' align=' center ' class=' P1 ' trtd width=' 42% '参数/tdtd width='58% '用法介绍/TD/trtd width=' 42% '行为=滚动，滑动，交替/tdtd width=' 58% '赛马模式：绕圈，跑一圈后停止，来回往复/TD/trtd width=' 42% '方向=左，右/中从右到左/TD/trtd宽度=' 42%' loop=100/tdtd宽度=' 58% '赛马次数：循环100次，如果不写，默认始终循环/TD/trtd宽度=' 42%' Height=200/tdtd宽度='58% '，赛马范围，宽度为100%，高度为200像素/TD/trtd宽度=' 42% ' scroll mount=20/tdtd宽度=' 58% '； 赛马速度：数字越大越快/TD/trtrtd宽度=' 42%' scrolldelay=500/tdtd宽度=' 58% '；赛马延迟：毫秒它可以实现跨越式滚动/TD/trtd width=' 42% ' hs pace=20，vspace=20/tdtd width='58% '赛马区与其他区之间的空白大小/TD/trtd width=' 42% ' bgcolor=# 00 ffcc/tdtd width=' 58% '

单词以某种颜色显示，每个字符按顺序交叉。当然，也有可能每回合后换一种颜色。代码实现很简单，其实就是给要改变的字符添加一个标签，设置颜色，最后定期调用程序改变颜色。效果图如下：

源代码：

！DOCTYPE html html head meta charset=' utf-8 ' title彩色文字的顺序闪烁效果/标题样式节{ position : absolute top :50%；左侧： 50%;transform: translate(-50%，-50%)；宽度： 220 pxheight : 42 xpadding : 10px font-size : 28px；margin : 10px } span { color : red }/style/head body section divtkgeagteewvbnmkj/divtkgeagteewvbnmkj/div/section/body script language=' JAVAScript '//获取两个div var str=文档。getelementsbytagname(' div ')[0]；var str 2=文档。getelementsbytagname(' div ')[1]；var j=0，i=0，k=0；var color=['蓝色','红色','黄色，' # cccccc ']；//每次只改变一个字符的颜色函数changeCharColor(){ var div=str。innertextvar len=div.lengthif(jlen){ str。innerhtml=div。子字符串(0，j)“span”div。charat(j)'/span ' div。子串(j ^ 1，len)；j；} else { j=0；} } //改变一段字母的颜色，每次增加一个字母函数ChangeColor 2(){ var div=str 2。innerTextvar len=div.lengthif(i=len) {//注意小于等于，因为子链的截取的时候，不包括第二个参数指定的位置。str 2。InnerHTML=' span style=' color : ' color[k]'；div.substring(0，i) '/span' div.substring(i，len)；控制台。日志(字符串。innerhtml)；我；} else { I=0；k；} if(k==3){ k=0；} } //定时调用setInterval('changeCharColor()'，100)；setInterval('changeColor2()'，150)；//递归调用/script/htmlPS:感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码，看看运行效果。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript运动效果与技巧汇总》 、 《JavaScript切换特效与技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。