Organizing common special effects on web pages: Advanced

The author has accumulated many wonderful and practical web special effects over time. Almost all of these special effects are commonly used web page special effects. Now I will introduce these organized and modified special effects to you in three levels.

　Advanced Chapter

　1． Display different greetings in different time periods

　＜Script Language="JavaScript"＞
　＜!--
　var text=""; day = new Date( ); time = day.getHours( );
　if (( time＞ =0) && (time ＜ 7 ))
　　text="Night owls, please take care of yourself! "
　if (( time ＞= 7 ) && (time ＜ 12))
　　text="The sun is so bright today, you What about that friend? "
　if (( time ＞= 12) && (time ＜ 14))
　　text="It’s lunch break. "
　if (( time ＞=14) && (time ＜ 18) )
　　text="Wish you a happy afternoon at work! "
　if ((time ＞= 18) && (time ＜= 22))
　　text="You are here again, please don't chat with MM for too long!"
　if ((time ＞= 22) && (time ＜ 24))
　　text="You should take a rest!"
　document.write(text)
　//---＞
　　/Script＞

　2. Reflection effect in water

　＜img id="reflect" src="../../your own picture file name" width="175" height="59"＞
　＜script language="JavaScript"＞
　function f1()
　{
　　setInterval("mp.filters.wave.phase+=10",100);
　　}
　if (document.all)
　{
　　document.write('＜img id=mp src="'+ document.all.reflect.src+'"
　style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞')
　window.onload=f1
}
　＜/script＞

　3． Slowly growing window

　＜Script Language="JavaScript"＞
　＜!--
　var Windowsheight=100
　var Windowswidth=100
　var numx=5
　function openwindow(thelocation){
　temploc=thelocation
　if
(!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById))
　{
　　window.open(thelocation)
　　 return
　　}
　windowsize=window.open("","","scrollbars")
windowsize.moveTo(0,0)
　windowsize.resizeTo(100,100)
　tenumxt()
　}
　function tenumxt(){
　if (Windowsheight＞=screen.availHeight-3)
　　numx=0
　windowsize.resizeBy(5, numx)
　Windowsheight+=5
　Windowswidth+=5
　if (Windowswidth＞=screen.width-5)
　{
　　Windowsize.location=temploc
　　Windowsheight=100
　　Windowswidth=100
　　numx=5
　　return
　}
　setTimeout(" tenumxt()",50)
　　}
　　//--＞
　＜/script＞
　＜p＞＜a href="javascript:openwindow('http://www.php.cn')"＞Enter＜/ a＞

　4. Change the IE icon in the IE address bar

We need to first make a 16*16 icon (icon file) and save it as index.ico. Upload this icon file to the root directory and add the following code between ＜head＞＜/head＞ on the home page:

　＜link REL = "Shortcut Icon" href="index.ico"＞

5. Let the web page go back at will

　＜a href="javascript:history.go(-X)"＞X＜/a＞ //Replace +" Just to move forward

　6. An information box pops up when the mouse points to it

Add the following code between ＜body＞＜/body＞:

　 ＜a href onmouseover="alert('Pop-up information!')"＞Displayed link text ＜/a＞

　7. Click the right button of the mouse to pop up the add favorites dialog box

　Add the following code between ＜body＞＜/body＞:

　＜Script Language=JavaScript＞
　if (document.all)
　document.body.onmousedown=new Function("if (event.button==2||event.button==3)
　window.external.addFavorite('your website','your website name)")
　＜/Script＞

　8. Randomly transform the background image (a special effect that can refresh your mood)

Add the following code between ＜head＞＜/head＞:

　 ＜Script Language="JavaScript"＞
　 image = new Array(4); / /Define image as an array of number of pictures
image [0] = 'tu0.gif' //The path of the background image
　image [1] = 'tu1.gif'
　image [2] = 'tu2.gif'
　image [3] = 'tu3.gif'
　image [4] = 'tu4.gif'
　number = Math.floor(Math.random() * image.length);
　document.write("＜BODY BACKGROUND="+image[number]+"＞") ;
　＜/Script＞

　9. Link to show the color as soon as the mouse is touched

Add the following code between ＜body＞＜/body＞:

　＜p onMouseMove="anniu()"＞If you dare to touch me, I will give you some color. ! ＜/p＞
　＜Script Language = "VBScript"＞
　sub anniu
　document.fgColor=int(256*256*256*rnd)
　end sub
　＜/Script＞

　10. A window falling from the sky with a phantom effect

　＜head＞
　＜Script language="JavaScript"＞
　 function move(x) {
　if(self.moveBy){
　self.moveBy (0,-800);
　for( i = x; i ＞ 0; i--)
　{
　self.moveBy(0,3);
　}
　for(j = 200; j ＞ 0; j--){ //If you think the window is shaking badly , just change 200 into single digits
　self.moveBy(0,j);
self.moveBy(j,0);
self.moveBy(0,-j);
self.moveBy(-j,0); 11． The translucent display effect of the table

Add the following code between ＜head＞＜/head＞:

　 ＜style＞
　 .alpha{filter: Alpha(Opacity=50)} //50 means 50% transparency
＜/style＞

　 Add the following code between ＜body＞＜/body＞:
　 ＜table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" ＞
　＜tr＞
　＜td width="100%" height="62"＞
　＜p align="center"＞It’s cool!＜/p＞
　＜/td＞
　＜/tr＞
　　＜/ table＞

The above is the arrangement of commonly used special effects on web pages: advanced content. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!