网页设计师博客

网页设计相关知识分享,网站建设经验交流

« 免费网络电话,快门免费电话,免费打电话网站设计 一个前途令人担忧的行业? »

网页设计中11种特殊效果的实现

    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>

http://www.6339.cn

 

 

  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>

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Spirit Build 80710 Code detection by Codefense  theme by BokeZhuti

Copyright kurui tech http://www.6339.cn/blog. 网页设计 Some Rights Reserved.