<!--
================================================== ==========
Script: Glow-And-Jump Animated 3-Color Neon Text
Functions: This script presents text surrounded by three
changing 'glow' colors, while also shifting the
vertical and horizontal layout for a striking
animation effect strongly resembling neon light
displays. Colors, dimensions, and rate are all
settable.
Browsers: IE5.0+
All others will show plain text
================================================== ==========
INSTRUCTIONS:
This is one of those scripts that, while truly simple to
implement, is best presented by showing a whole page with
a simple example, and walking you through it step-by-step.
You can simply copy this entire cut-and-paste into a blank
page -- it'll run straight off -- and then work your way
down through the commented directions.
There is no extraneous code on this page, other than the
comments.
================================================== ==========
//-->
<html>
<head>
<!-- SETTING UP THE STYLES...
Set the color of the glow for each of the three styles
(F1, F2,F3) to the colors desired; format is the same as
colors for html.
Set the strength (in pixels) for how much glow will appear
around the letters. Using slightly different values adds
to the effect of motion.
Set the widths to somewhat different values... this is what
gives the animation effect. You will need to experiment
with these, depending on the length and font size, etc.,
of your text.
Set the heights as needed; again, some experimenting will
be needed depending on your text.
The <style> ... </style> should go in the head section of
your page.
//-->
<style>
.F1 {filter: glow(Color=#FF8000,Strength=10);
width=150px;
height=200px;}
.F2 {filter: glow(Color=#00FF00,Strength=9);
width=110px;
height=200px;}
.F3 {filter: glow(Color=#0080FF,Strength=12);
width=90px;
height=200px;}
</style>
<!-- SETTING UP THE SCRIPT...
The only thing you need to set in this is the rate. The
<script> ... </script> belongs in the head of your page,
after the styles.
//-->
<script>
// set the rate of the display in milliseconds
var rate = 500
// do not edit below this line
// ============================
var i = 0
var F = 'F1'
function doThing(){
if (document.getElementById&&document.all) {
ok = true
i++;
if (i==1) F = 'F1'
if (i==2) F = 'F2'
if (i==3) F = 'F3'
YammaYamma.cl***Name=F
if (i > 2) i = 0
timer=setTimeout('doThing()', rate)
}
}
</script>
</head>
<!-- CALLING THE SCRIPT...
Use the onload call shown below in the body tag to start
the doThing function running.
//-->
<body bgcolor="#000000" onload="doThing()">
<!-- SETTING UP THE HTML AND TEXT...
We show the text wrapped inside a table and then centered.
Strictly speaking, this isn't necessary; however, it will
help to give you control over the layout and prevent the
changing vertical dimensions from blowing up the vertical
alignment of the page.
You'll normally want to set the table width somewhat wider
than the *widest* width you set in the <style> above, to
give the text room to move.
You can set the basic default characteristics of the text
(font, size, color) normally, as shown below.
The most important concern is to have the id="YammaYamma"
attached exactly as shown, so the doThing function can find
the text.
//-->
<table width="200" cellspacing="0" cellpadding="10">
<tr>
<td>
<center>
<font face="Courier" size="5" color="#FFFFFF">
<p id="YammaYamma">
<b>I really think I gotta get out more often!</b>
</p>
</font>
</center>
</td>
</tr>
</table>
</body>
</html>
<!-- END OF EXAMPLE //-->
3 colour Neon Text
a
新加的空白文章12
Linear Mode
