5-10.htm

JavaScript网页特效实例大全

<SCRIPT LANGUAGE="JavaScript">
if (document.all)
{
yourLogo = "I love JavaScript very much----!";           <!--待旋转的文字-->
logoFont = "Arial";                                          <!--文字的字体-->
logoColor = "FF0000";                                        <!--文字的颜色-->
yourLogo = yourLogo.split('');             <!--将旋转的字符串分成单个的字符-->
L = yourLogo.length;                        <!--获得字符串的长度-->
TrigSplit = 360 / L;                        <!--设置每次旋转的角度-->
Sz = new Array()                             <!--声明一个数组-->
logoWidth = 100;                             <!--定义宽度-->
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:10px;height:10px;font-family:'+logoFont+';font-size:12px;'+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');                                    <!--依次显示每一个字符-->
}
document.write('</div></div>');
function Mouse()
{
ypos = event.y;                                   <!--获得当前鼠标的纵坐标-->
xpos = event.x - 5;                           <!--获得当前鼠标的横坐标-->
}
document.onmousemove=Mouse;                    <!--鼠标移动后调用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);                                            <!--获得第i个字符的上边界-->
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);                                            <!--获得第i个字符的左边界-->
Sz[i] = ie[i].style.pixelTop - ypos;         <!--设置字体-->
if (Sz[i] < 5) Sz[i] = 5;                      <!--设置字体-->
ie[i].style.fontSize = Sz[i] / 1.7;          <!--当前字体的变化-->
}
currStep -= step;
setTimeout('animateLogo()', 20);           <!--动画的实现-->
}
window.onload = animateLogo;                   <!--直接调用animatelogo函数-->
}
</script>