网页常用特效整理:高级篇

 
  1.不同时间段显示不同问候语 
 
  <Script Language="javascript"> 
  <!-- 
  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="javascript"> 
  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="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.ccjol.com')">进入</a> 
 
  4.改变IE地址栏的IE图标 
 
  我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码: 
 
  <link REL = "Shortcut Icon" href="/index.ico"> 
 
    5.让网页随意后退 
 
  <a href="javascript :history.go(-X)">X</a> //把X换成你想要后退在页数 
   //把"-"变成"+"就为前进 
 
  6.鼠标指向时弹出信息框 
 
  在<body></body>之间加上如下代码: 
 
  <a href onmouseover="alert('弹出信息!')">显示的链接文字</a> 
 
  7.单击鼠标右键弹出添加收藏夹对话框 
 
  在<body></body>之间加上如下代码: 
 
  <Script Language=javascript> 
  if (document.all) 
  document.body.onmousedown=new Function("if (event.button==2||event.button==3) 
  window.external.addFavorite('您的网址','您的网站名称)") 
  </Script> 
 
  8.随机变换背景图象(一个可以刷新心情的特效) 
 
  在<head></head>之间加上如下代码: 
 
  <Script Language="javascript"> 
  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 = "VBScript"> 
  sub anniu 
  document.fgColor=int(256*256*256*rnd) 
  end sub 
  </Script> 
 
  10.从天而降并有幻影效果的窗口 
 
  <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--){ //如果你认为窗口抖动厉害,就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> 

你可能感兴趣的:(特效)