新乡移动手机靓号出售:javascript 网页设计中11种好看的效果实现

来源:百度文库 编辑:偶看新闻 时间:2024/05/05 23:49:49

1.不同时间段显示不同问候语     <script Language="#">  <!--   var text=""; day = new Date( ); time = day.getHours( );   if (( time>=0) && (time < 7 ))     text="夜猫子,要注意身体哦! "   if (( time >= 7 ) && (time < 12))     text="今天的阳光真灿烂啊,你那个朋友呢?"   if (( time >= 12) && (time < 14))     text="午休时间。您要保持睡眠哦!"   if (( time >=14) && (time < 18))     text="祝您下午工作愉快! "   if ((time >= 18) && (time <= 22))     text="您又来了,可别和MM聊太久哦!"   if ((time >= 22) && (time < 24))     text="您应该休息了!"   document.write(text)   //--->  </script>   

 

2.水中倒影效果    <img id="reflect" src="../../你自己的图片文件名" width="175" height="59">   <script language="#">  function f1()   {     setInterval("mdiv.filters.wave.phase+=10",100);   }   if (document.all)   {     document.write('<img id=mdiv src="'+document.all.reflect.src+'"     style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()">')     window.onload=f1   }   </script>    

 

3.慢慢变大的窗口    <script Language="#">  <!--   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="#:openwindow('http://www.ccjol.com')">进入</a> 

 

 4.改变IE地址栏的IE图标   我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码:   <link REL = "Shortcut Icon" href="index.ico">

 

5.让网页随意后退   <a href="#:history.go(-X)">X</a> //把X换成你想要后退在页数   //把“-”变成“+”就为前进   

 

6.鼠标指向时弹出信息框   在<body></body>之间加上如下代码:   <a href onmouseover="alert('弹出信息!')">显示的链接文字</a>  

 

 7.单击鼠标右键弹出添加收藏夹对话框   在<body></body>之间加上如下代码:   <script Language=#> if (document.all)  document.body.onmousedown=new Function("if (event.button==2||event.button==3)   window.external.addFavorite('您的网址','您的网站名称)")  </script> 

 

 

 8.随机变换背景图象(一个可以刷新心情的特效)   在<head></head>之间加上如下代码:   <script Language="#">  image = new Array(4); //定义image为图片数量的数组  image [0] = 'tu0.gif' //背景图象的路径  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.鼠标一碰就给颜色看的链接   在<body></body>之间加上如下代码:   <p onMouseMove="anniu()">你敢碰我,我就给点颜色你看!</p>  <script Language = "#">  sub anniu   document.fgColor=int(256*256*256*rnd)   end sub   </script>  

 

 

 10.从天而降并有幻影效果的窗口   <head>  <script language="#">  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--){ //如果你认为窗口抖动厉害,就200换成个位数  self.moveBy(0,j);   self.moveBy(j,0);   self.moveBy(0,-j);   self.moveBy(-j,0);   }   }   }   </Scrip>  <body bgColor=#ffffff onload=move(280)>  </body>  </head>   

 

 

11.表格的半透明显示效果   在<head></head>之间加上如下代码:   <style>  .alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度  </style>   在<body></body>之间加上如下代码:  <table border="1" width="100" height="62" class="alpha" bgcolor="#F2A664" >  <tr>  <td width="100%" height="62">  <div align="center">很酷吧!</div>  </td>  </tr>  </table>