首页 > 网络编程 > JavaScript > 网页特效 > 链接特效 > js 颜色炫彩渐变

js实现类似光照的炫彩文字渐变视觉冲击效果

2012-12-25 17:44:25 作者：

使用JavaScript实现的类似光照效果的文字，由渐变光照过去，文字从左到右渐变，看过之后目瞪口呆很有视觉冲击效果,感兴趣的朋友可以研究下

<!doctype html public "-//W3C//DTD HTML 3.2//EN"> 
<HTML><head><title>炫彩的文字效果</title> 
<META NAME="ROBOTS" CONTENT="NOINDEX"> 
<SCRIPT Language="VBScript"> <!-- 
'Declare the variable used to increment the x coordinate 
Public XPos 
'Initialize the variable 
XPos = 20

Function LightMe() 
'Puts a spotlight on the title 
call document.all.title.filters(0).addPoint(20, 10, 100, 200, 225, 200, 100) 
MoveLight 
End Function

Function MoveLight() 
'Moves the spotlight from left to right across the title area until it reaches the edge 
'of the window and then stops 
'This increments the x coordinate 
XPos = XPos + 5 
'If not at the right edge of the window then move the spotlight right 
If XPos < 480 Then 
call document.all.title.filters(0).movelight(0, xpos, 10, 100, 1) 
myTimer = window.setTimeout("Movelight", 1) 
'If at the right edge of the window call the first paragraph of text 
Else 
window.clearTimeout(myTimer) 
call document.all.title.filters(0).clear 
Text1Trans 
End If 
End Function

Sub Text1Trans() 
'Makes the first paragraph of text visible 
Text1.filters(0).Apply() 
Text1.style.visibility="visible" 
Text1.filters(0).Play() 
myTimer = window.setTimeout("Text2Trans", 3000) 
End Sub

Sub Text2Trans() 
'Makes the second paragraph of text visible 
Text2.filters(0).Apply() 
Text2.style.visibility="visible" 
Text2.filters(0).Play() 
Link2Trans 
End Sub

Sub Link2Trans() 
'Makes the Next button visible 
Link2.filters(0).apply() 
Link2.style.visibility="visible" 
Link2.filters(0).play() 
End Sub

Sub Next_onclick() 
'Makes the button appeared depressed and moves to next slide 
document.all.ButtonNext.src = "https://www.jb51.net/images/logo.gif" 
location.href= "https://www.jb51.net" 
End Sub 
--> 
</script> 
<META HTTP-EQUIV="Content-Type" content="text/html; charset=gb2312"> 
<style> 
body,div,td{font:menu} 
</style> 
</head> 
<BODY onload="LightMe" BGCOLOR="#800000" TEXT="#D4B878" > 
<Div id="title" style="position:absolute; left:7; top:7; width:425; visibility:visible; filter:Light"><strong>欢迎使用 Internet 信息服务！</strong></Div> 
<div id="Text1" style="position: absolute;left: 7; top: 45; width: 425; visibility: hidden; filter: revealTrans(Duration=2, Transition=19); height: 39"><strong><font color="#D4B878">Microsoft Internet 信息服务是一个桌面 Web 服务器，使用它，您可以从自己的计算机上发布个人主页，并把您计算机上的文档共享到整个网络。</font> 
</strong></div>

<div id="Text2" style="position: absolute; left: 200; top: 175; width: 225; visibility: hidden; filter: revealTrans(Duration=3, Transition=12); height: 39"><strong><font color="#D4B878">在将站点上载到 Internet 提供商之前，也可以将 IIS 用作开发平台。</font></strong></div> 
<div id="Link2" style="position:absolute; top:285; left:385; visibility:hidden; filter:revealTrans(Duration=3, Transition=12)" ><img id="ButtonNext" src="right1up.gif" border=0 onmouseover="ButtonNext.src = 'https://www.jb51.net/images/logo.gif' " onmouseout="ButtonNext.src = 'right1up.gif' " onclick=next_onclick></div> 
<div id="NextButton" style="display:none"><img src=right3down.gif></div> 
</font> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js实现类似光照的炫彩文字渐变视觉冲击效果

您可能感兴趣的文章: