教学项目二十三 JavaScript文字特效网页设计
【 基本内容 】
讲解 JavaScript中几种文字特效网页设计
【 教学要求 】
学会设计文字的特效
一、案例设计,
设计文字绕圈旋转特效网页
程序代码如下,
<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 = 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 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>
案例二、设计文字的变色特效网页
程序代码如下,
<html> <body>
<script language=javascript>
<!--
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
var ctext = "看看我, 我会变色 ";
var speed = 1000;
var x = 0;
var color = new initArray(
"red",
"blue",
"green",
"black",
"yellow",
"pink");
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.write('<div id="c"><center>'+ctext+'</center></div>');
}
function chcolor()
{
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.all.c.style.color = color[x];
}
(x < color.length-1)? x++, x = 0;
}
setInterval("chcolor()",1000);
-->
</script>
</body>
</html>
案例设计,
设计网页，在状态栏实现文字的跑马灯效果，显示信息,
“欢迎光临 湖北职院 计科系”
程序代码如下,<html>
<head>
<SCRIPT Language="JavaScript">
var msg="欢迎光临 湖北职院 计科系 ";
var interval = 300;
seq = 0;
function Scroll() {
len = msg.length;
window.status = msg.substring(0,seq+1);
seq++;
if ( seq >= len ) { seq = 0 };
window.setTimeout("Scroll();",interval );
}
</SCRIPT></head>
<body onload="Scroll()"></body>
</html>
【 课后小结 】
通过本次课学习, 学会对 JavaScript源代码进行修改,
实现不同的文字特效 。 。