Phiên bản đầy đủ: jsB@nk » Vui nhộn » Hiệu ứng mờ ảo: chữ có bóng ma
URL: https://www.javascriptbank.com/ghostpage-your-text-will-be-haunted.html
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.
Phiên bản đầy đủ: jsB@nk » Vui nhộn » Hiệu ứng mờ ảo: chữ có bóng ma
URL: https://www.javascriptbank.com/ghostpage-your-text-will-be-haunted.html
<script><!-- Beginning of JavaScript -// Ghostpage: your text will be haunted// Author: Peter Gehrig // Web Site: http://www.24fun.com // do not edit the variables belowvar floatingspeed=15var 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=600var clipheightmax=400var tempo=20var numberofghosts=2var 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=0var marginleft=0var margintop=0var marginright=0var timerfunction setValues() {if (document.all) {marginleft=document.all.ghost0.style.posLeftmargintop=document.all.ghost0.style.posTop marginbottom=document.body.clientHeight marginright=document.body.clientWidthfor (i=0;i<=numberofghosts;i++) { clipleft[i]=randommaker(marginright+clipwidthmax)-clipwidthmaxcliptop[i]=randommaker(margintop+clipheightmax)-clipheightmaxclipheight[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><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>