教学项目二十三 Javascrip文字特效网页设计 基本内容】 讲解 JavaScript中几种文字特效网页设计 教学要求】 学会设计文字的特效 案例设计 设计文字绕圈旋转特效网页
教学项目二十三 JavaScript文字特效网页设计 【基本内容】 讲解JavaScript中几种文字特效网页设计 【教学要求】 学会设计文字的特效 一、案例设计： 设计文字绕圈旋转特效网页
G:1网页设计教案11 jjgkk\ le1gtt ht oft Internet Explorer 回回区 文件)编辑)查看①)收藏)工具)帮助QD ⊙后·②·哈批☆收夹的媒体的总,图,回当 地址①)6网页设计教案1011thm 转到链接” 术学 科 院计 动完毕 d samples Micros Mi crosoft tt,五tm 至G:网页设 20:49
程序代码如下: <html> <body background=21.jpg"> <SCRIPT LANGUAGE="JavaScript"> if ( document all)( yourLogo="湖北职业技术学院计科系学生网"; logo Font="隶书 logo color=00b000'1 yourLogo= yourLogo split( L= your Logo.length TrigSplit-=360/L yO Sz= new Array( logoWidth 180 ogoHeight =-30
程序代码如下： <html> <body background="21.jpg"> <SCRIPT LANGUAGE="JavaScript"> if (document.all) { yourLogo = "湖北职业技术学院计科系学生网"; logoFont = "隶书"; logoColor = "00b000"; yourLogo = yourLogo.split(''); L = yourLogo.length; TrigSplit = 360 / L; Sz = new Array() logoWidth = 180; logoHeight = -30;
ypos=0 Xpos step=0.03; currStep=0; document. write(<div id="outer" style="position: absolute; top: 0 px; left: 0px"><div style="position: relative>); for(i=0; i< L; i++)t document. write( <div id="ie"style="position: absolute; top: 0px; left: 0px; +width: 20 px; height: 20px; font-family: +logo Font+; font-size: 40 px; +color: +logo Color+; text-align: center >+yourLogo[il+</div>); document. write(</div></div>); function Moused ypos =event y; xpos=event. x-5;
ypos = 0; xpos = 0; step = 0.03; currStep = 0; document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < L; i++) { document.write('<div id="ie" style="position:absolute;top:0px;left:0px;' +'width:20px;height:20px;font-family:'+logoFont+';font-size:40px;' +'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>'); } document.write('</div></div>'); function Mouse() { ypos = event.y; xpos = event.x - 5; }
document onmousemove=Mouse function animate logo i outerstyle. pixelTop-document bodyscrollTop; for(i=0; i< L; i++)t li]style. top= ypos logoHeight* Math. sin(curr Step + i* TrigSplit* Math. PI/180) ieli style left= xpos logo Width Math cos(currStep +i* TrigSplit Math PI/180); SZil=ielistyle. pixelTop-ypos; if(S<5)S叫i=5; ie[]. style. fontSize= Szli]*1.5: urrStep-=step; setTimeout(animatelogo0', 20);3 window. onload animateLogo; 1 </script></body></htm1>
document.onmousemove=Mouse; function animateLogo() { outer.style.pixelTop = document.body.scrollTop; for (i = 0; i < L; i++) { ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180); ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180); Sz[i] = ie[i].style.pixelTop - ypos; if (Sz[i] < 5) Sz[i] = 5; ie[i].style.fontSize = Sz[i]*1.5 ; } urrStep -= step; setTimeout('animateLogo()', 20); } window.onload = animateLogo; } </script></body></html>