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

时间:2020-05-13 人气:0

<!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 = "//www.qb5200.com/images/logo.gif" 
location.href= "//www.qb5200.com" 
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><strong><font color="#D4B878">Microsoft Internet 信息服务是一个桌面 Web 服务器，使用它，您可以从自己的计算机上发布个人主页，并把您计算机上的文档共享到整个网络。</font> 
</strong></div>

<div><strong><font color="#D4B878">在将站点上载到 Internet 提供商之前，也可以将 IIS 用作开发平台。</font></strong></div> 
<div><img onerror="javascript:this.src='/skin1/img/error.jpg';" id="ButtonNext" src="https://img.qb5200.com/download-x/20200513/33882.gif" border=0 onmouseover="ButtonNext.src = '//www.qb5200.com/images/logo.gif' " onmouseout="ButtonNext.src = 'https://img.qb5200.com/download-x/20200513/33882.gif' " onclick=next_onclick></div> 
<div><img onerror="javascript:this.src='/skin1/img/error.jpg';" src=https://img.qb5200.com/download-x/20200513/33883.gif></div> 
</font> 
</body> 
</html>

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

加载全部内容