Home > Article > Web Front-end > 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)!