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

黄舟
发布: 2016-12-23 14:54:46
原创
1514人浏览过

笔者日积月累了许多精彩、实用的web特效的制作,这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。

  高级篇

  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("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.慢慢变大的窗口

  <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')">进入</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">
  <p align="center">很酷吧!</p>
  </td>
  </tr>
  </table>

 以上就是网页常用特效整理:高级篇的内容,更多相关内容请关注PHP中文网(www.php.cn)!

   

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号