手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

用JavaScript做升降文字的特殊效果

时间:2024-10-12 01:22:39

1、setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

2、CSS的 style.top 可以获得 html 元素距离上方或外层元素的位置,返回的是字符串。该属性可以赋值,根据不同的值,调整不同的距离。

3、<html><head><title>升降文字的特殊效果</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="JavaScript">var done = 0; //完成标识var step = 4; //单步变量function anim(yp, yk) //函数:控制升降{if(document.layers) { //如果是非ie浏览器 document.layers["napis"].top = yp; //设置距离上面的高度} else { //如果是ie浏览器 document.all["napis"].style.top = yp; //设置距离上面的高度}if(yp > yk) step = -4;if(yp < 60) step = 4;setTimeout('anim('+(yp+step)+','+yk+')', 35); //时间延时执行anim函数}function start(){if(done) return;done = 1; //如果已经完成则返回if(navigator.appName == "Netscape") { //如果是非ie浏览器 document.napis.left = innerwidth/2 - 145; anim(60, innerHeight - 60);} else { //如果是ie浏览器 napis.style.left = 120;anim(60, document.body.offsetHeight - 60);}}</script></head><body><center> <h1>升降文字的特殊效果</h1> <hr /> <br /> <div id="napis" style="position:absolute;top:-100;left:500px;color:#000000;font-family:宋体;font-size:9pt;"> <p>看,这行文字正在上下移动!</p> </div></center><script language="JavaScript">setTimeout('start()', 10); //时间延时执行start函数</script></body></html>

4、运行该程序后,页面出现一个文字字符串,自动向下方缓缓移动。当移动到底部时又自动上升,如下图所示。字符串文字会像这样一直上下如电梯般往复循环。

用JavaScript做升降文字的特殊效果
© 手抄报圈