JavaScript 实现网页文字跳动特效
作者:木棉时间:2026-10-24 07:42:11浏览:282
本文介绍如何使用JavaScript实现网页上文字的跳动动画效果。通过设置CSS绝对定位和定时器函数,控制多个DIV元素在页面中的垂直位置变化,从而产生文字上下跳动的视觉特效。
文字跳动特效实现
<title>跳动的文字</title> <body onload=setVariables(),startbounce1(),startbounce2(),startbounce3(),startbounce4(),startbounce5(),startbounce6()> <DIV id=object1 style="LEFT: 125px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <CENTER> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>我</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=object2 style="LEFT: 125px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>是</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=object3 style="LEFT: 185px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>真</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=object4 style="LEFT: 215px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>的</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=object5 style="LEFT: 245px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>爱</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=object6 style="LEFT: 243px; POSITION: absolute; TOP: -50px; Z-INDEX: 2"> <TABLE bgColor=#000000 width=10> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>你</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=line1 style="HEIGHT: 24px; LEFT: 27px; POSITION: absolute; TOP: 215px; WIDTH: 707px; Z-INDEX: 1"> <TABLE bgColor=#000000> <TBODY> <TR> <TD><FONT color=#33ff33> <CENTER><B>________________________</B></CENTER></TD></TR></TBODY></TABLE></DIV> <DIV id=note style="HEIGHT: 24px; LEFT: 31px; POSITION: absolute; TOP: 237px; WIDTH: 697px; Z-INDEX: 1"> <TABLE bgColor=#000000> <TBODY> <TR> <TD><FONT color=#cccccc><B>www.jb51.net</B></TD></TR></TBODY></TABLE></DIV>注意:若使用Ctrl+A全选并引入外部JavaScript文件,必须刷新页面后代码才能正常执行。
作者最新文章
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
