Hiệu ứng dùng các khung hơi trong suốt di chuyển khắp trang web, làm cho nội dung trang web 'bóng ảo' khắp nơi. HTML Code:
<body id="thisbody" onLoad="setValues()"><DIV id="ghost0" style="position:absolute;top:10px;left:0px;"><font size=2 face=Verdana color=333333><ul><b>Ghostpage: your text will be
haunted
</b><li>Something rather strange happens on this webpage: After loading the text
starts changing its colors in a creepy way! Is this witchery? Is this the
frightening cyberghost haunting your screen? Or is it just a little bit
DHTML-magic? You decide (and then call the ghostbusters, please).
<li>Internet Explorer 4 or higher
</ul><b>Configuration
</b><li>Open the HTML-file.
<li>Go to the
<body>-section of the HTML-file and put the content of your
webpage into a
<div>-container.
<li>Name this
<div>-container id="mastercontent".
<li>Attention: the
<div>-container must be set to an absolute position!
<li>Copy the whole
<div>-container with the id="mastercontent" and paste it
three times below the
<div>-container with the id="mastercontent".
<li>Give the three new
<div>-containers a new id: 'gost0', 'ghost1', 'ghost2'.
<li>Do not change anyhing at all inside the three new
<div>-containers
<b>except
for the colors of your fonts!
</b> The change of fontcolors will create the
strange effect!
<li>Sounds tooooooooo complicated? No, it's not. In fact it's very easy. After
customizing the HTML-page it should look like this:
<br><br> <table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF><font size=2 face=Verdana color=666666><DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br> your original webcontent (original fontcolors)
<br></DIV><br><br><DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=red>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=green>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=brwon>your original webcontent (changed fontcolors)
</font><br></DIV><br><br></td></tr></table><br><li>And now let's have some fun and haunt the cyberspace!
</font></ul></DIV><DIV id="ghost1" style="position:absolute;top:10px;left:0px;"><font size=2 face=Verdana color=660000><ul><b>Ghostpage: your text will be
haunted
</b><li>Something rather strange happens on this webpage: After loading the text
starts changing its colors in a creepy way! Is this witchery? Is this the
frightening cyberghost haunting your screen? Or is it just a little bit
DHTML-magic? You decide (and then call the ghostbusters, please).
<li>Internet Explorer 4 or higher
</ul><b>Configuration
</b><li>Open the HTML-file.
<li>Go to the
<body>-section of the HTML-file and put the content of your
webpage into a
<div>-container.
<li>Name this
<div>-container id="mastercontent".
<li>Attention: the
<div>-container must be set to an absolute position!
<li>Copy the whole
<div>-container with the id="mastercontent" and paste it
three times below the
<div>-container with the id="mastercontent".
<li>Give the three new
<div>-containers a new id: 'gost0', 'ghost1', 'ghost2'.
<li>Do not change anyhing at all inside the three new
<div>-containers
<b>except
for the colors of your fonts!
</b> The change of fontcolors will create the
strange effect!
<li>Sounds tooooooooo complicated? No, it's not. In fact it's very easy. After
customizing the HTML-page it should look like this:
<br><br> <table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF><font size=2 face=Verdana color=660000><DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br> your original webcontent (original fontcolors)
<br></DIV><br><br><DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=red>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=green>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=brown>your original webcontent (changed fontcolors)
</font><br></DIV><br><br></td></tr></table><br><li>And now let's have some fun and haunt the cyberspace!
</font></ul></DIV><DIV id="ghost2" style="position:absolute;top:10px;left:0px;"><b>Configuration
</b><li>Open the HTML-file.
<li>Go to the
<body>-section of the HTML-file and put the content of your
webpage into a
<div>-container.
<li>Name this
<div>-container id="mastercontent".
<li>Attention: the
<div>-container must be set to an absolute position!
<li>Copy the whole
<div>-container with the id="mastercontent" and paste it
three times below the
<div>-container with the id="mastercontent".
<li>Give the three new
<div>-containers a new id: 'gost0', 'ghost1', 'ghost2'.
<li>Do not change anyhing at all inside the three new
<div>-containers
<b>except
for the colors of your fonts!
</b> The change of fontcolors will create the
strange effect!
<li>Sounds tooooooooo complicated? No, it's not. In fact it's very easy. After
customizing the HTML-page it should look like this:
<br><br> <table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF><font size=2 face=Verdana color=000066><DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br> your original webcontent (original fontcolors)
<br></DIV><br><br><DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=red>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=green>your original webcontent (changed fontcolors)
</font><br></DIV><br><br><DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br> <font color=brwon>your original webcontent (changed fontcolors)
</font><br></DIV><br><br></td></tr></table><br><li>And now let's have some fun and haunt the cyberspace!
</font></ul></DIV></body> <!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
--><script><!-- Beginning of JavaScript -
// Ghostpage: your text will be haunted
// Author: Peter Gehrig
// Web Site: http://www.24fun.com
// do not edit the variables below
var floatingspeed=15
var clipleft=new Array()
var clipright=new Array()
var cliptop=new Array()
var clipbottom=new Array()
var clipwidth=new Array()
var clipheight=new Array()
var clipwidthmax=600
var clipheightmax=400
var tempo=20
var numberofghosts=2
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofghosts;i++) {
stepx[i]=randommaker(floatingspeed)
stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()
var marginbottom=0
var marginleft=0
var margintop=0
var marginright=0
var timer
function setValues() {
if (document.all) {
marginleft=document.all.ghost0.style.posLeft
margintop=document.all.ghost0.style.posTop
marginbottom=document.body.clientHeight
marginright=document.body.clientWidth
for (i=0;i<=numberofghosts;i++) {
clipleft[i]=randommaker(marginright+clipwidthmax)-clipwidthmax
cliptop[i]=randommaker(margintop+clipheightmax)-clipheightmax
clipheight[i]=randommaker(clipheightmax)
clipwidth[i]=randommaker(clipwidthmax)
}
checkmovement()
}
}
function randommaker(range) {
rand=Math.floor(range*Math.random())
if (rand==0) {rand=Math.ceil(range/2)}
return rand
}
function checkmovement() {
if (document.all) {
checkposition()
movepictures()
timer=setTimeout("checkmovement()",tempo)
}
}
function movepictures() {
if (document.all) {
for (i=0;i<=numberofghosts;i++) {
var thisspan=eval("document.all.ghost"+(i)+".style")
clipleft[i]+=stepx[i]
clipright[i]=clipleft[i]+clipwidth[i]
cliptop[i]+=stepy[i]
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
}
}
}
function checkposition() {
if (document.all) {
for (i=0;i<=numberofghosts;i++) {
var thisspan=eval("document.all.ghost"+i+".style")
if (clipright[i]>marginright) {
clipleft[i]-=Math.abs(stepx[i]+1)
clipright[i]=clipleft[i]+clipwidth[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepx[i]=randommaker(floatingspeed)*-1
}
if (clipleft[i]<marginleft) {
clipleft[i]+=Math.abs(stepx[i]+1)
clipright[i]=clipleft[i]+clipwidth[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepx[i]=randommaker(floatingspeed)
}
if (clipbottom[i]>marginbottom) {
cliptop[i]-=Math.abs(stepy[i])
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepy[i]=randommaker(floatingspeed)*-1
}
if (cliptop[i]<margintop) {
cliptop[i]+=Math.abs(stepy[i])
clipbottom[i]=cliptop[i]+clipheight[i]
thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
stepy[i]=randommaker(floatingspeed)
}
}
}
}
// - End of JavaScript - --></script> <!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->__________________
Mon Mar 02, 2009 6:41 pm