DOM跑马灯文字效果

2024-09-05 12:21:36

字体：大中小

来源：转载

供稿：网友

DOM对象实现的标题栏跑马灯文字滚动效果，这里是取自title标签内的文字来实现跑马灯效果，只是为了演示Dom对象的用法。在示例中，可控制文字向左滚动、向右滚动，为了便于理解，代码中已给出完整的注释，相信是研究DOM操作的一个好例子。

<html><head><title>Dom跑马灯效果</title><script type="text/javascript" language="javascript">var timeId = "";//默认跑马灯效果function run() {  var title = document.title;  var firsttitle = title.charAt(0);  var remaintitle = title.substring(1, title.length);  document.title = remaintitle + firsttitle;}//左转，字符串拼接function leftrun() {  var title = document.title;  var firsttitle = title.charAt(0);  var remaintitle = title.substring(1, title.length);  document.title = remaintitle + firsttitle;}//右转，字符串拼接function rightrun() {  var title = document.title;  var righttitle = title.substring(title.length - 1, title.length);  var remaintitle = title.substring(0, title.length - 1);  document.title = righttitle + remaintitle;}//定义变量记录开启的计时器var leftclearId;var rightclearId;//左滚方法function leftsetInter() {  //定义变量记录当前开启的计时器ID  leftclearId = setInterval('leftrun()', 500);  //清除正在运行的计时器  clearInterval(rightclearId);}//右滚方法function rightsetInter() {  //定义变量记录当前开启的计时器ID  rightclearId = setInterval('rightrun()', 500);  //清除正在运行的计时器  clearInterval(leftclearId);}</script></head><body>    <input type="button" value="跑马灯效果" onclick="timeId=setInterval('run()',500)"/>    <input type="button" value="停止" onclick="clearInterval(timeId)"/><br/><br/><br/>    <input type="button" value="向左滚动" onclick="leftsetInter()"/>    <input type="button" value="向右滚动" onclick="rightsetInter()"/></body></html>

上一篇：CSS3实例：文字描边效果

下一篇：3D文字旋转有空间立体感

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注