捌玖网络工作室's Archiver

admin 发表于 2008-1-19 22:37

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

笔者日积月累了许多精彩、实用的Web特效的制作,这些特效几乎都是比较常用的网页特效。现在我就把这些经过整理和修改过的特效分三个级别分别介绍给大家。
c,QG&vkL!R L#@8x8aQ)~ { m
  高级篇
1vd4Z }A$l3XL@
#V\k5[N   1.不同时间段显示不同问候语DSX W@ nL
M1E u5D-lhW
  
Nw\(DPpK'f
4Rm,V'r.q   2.水中倒影效果
#s1g/Sj+L!xN'd
6hm(i*^7xG }6I   <img id="reflect" src="你自己的图片文件名" width="175" height="59">
Jcha;?   (P;nD4f PD

;[b,ykT9~2M$OCk&V   3.慢慢变大的窗口
,W;_1m A%h'j'd
sFVIL   1NFd.U:iT3R3wFn
  <p><a href="javascript:openwindow('http://89w.org')">进入</a>
-t+j{%F2z)VQ %y T-{!u;i
  4.改变IE地址栏的IE图标
8\:y.a yTP? f!wT f
^S1J,wO`;A   我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码:F s#b)lWlK

Ek}OZZ0U   <link REL = "Shortcut Icon" href="index.ico">
c [2K.b"s B#l8i ~yn 5.让网页随意后退/L[(aAJ _4D
_ Cz9t/A
  <a href="javascript:history.go(-X)">X</a> //把X换成你想要后退在页数? v{l1]/W3q9Hpr
           //把“-”变成“+”就为前进
$?#_g(vd6_0NnR 4fGH N%DUJW
  6.鼠标指向时弹出信息框
R z%vL*{MC5i4T
Pd"V9@)lV,`   在<body></body>之间加上如下代码:/C0P;C9R(P2j+f%AA8u N
8@2R4bQH+{/c
  <a href>显示的链接文字</a>
7v8S|&|t4?
b5Y#v9x{#~#I   7.单击鼠标右键弹出添加收藏夹对话框MAxf oJ/Z*q

@`U}A3XG,Q   在<body></body>之间加上如下代码:
h{ p6@D7Fax"J
Dq^!We#p#K    chnotk_4Q

z|\z`Kk$N   8.随机变换背景图象(一个可以刷新心情的特效)t)o$b;g ZY

G0z3c%w&b   在<head></head>之间加上如下代码:
)DVBH;z"f T
"jhLa3\ EH7fiJ   %z/um#X(].E5Pu_P
@n P?6EUFY
  9.鼠标一碰就给颜色看的链接
+re1D P'a ?"wc w]o d i,N3H[ Z
  在<body></body>之间加上如下代码:
.^*y{0YB2jX zNV [X*Rb{7eN
  <p>你敢碰我,我就给点颜色你看!</p>
4C#T{F"{p   
4O*Rdl(JC!Uy gN+}1i
b8_:yB3yC_E^%qB   10.从天而降并有幻影效果的窗口-qD7LA$rM
8o-c&L:jd(j
  <head>Opn!M#{r1L
  <Script language="javascript">o(W zVm XD'e9n
  function move(x) {
w.O0{~w z`9T   if(self.moveBy){
Pbq3N_(D   self.moveBy (0,-800);
$fx~+^~qm p SU   for(i = x; i > 0; i--)
w0e*D`}mZ[*if   {u7^y0_"gC"h}
  self.moveBy(0,3);
"Cvk i V;n   }
0c dP2F/RTb K   for(j = 200; j > 0; j--){  //如果你认为窗口抖动厉害,就200换成个位数d'OM dC\8uF
  self.moveBy(0,j);A!l@Jp
  self.moveBy(j,0);
}$W2L\1OF`,|   self.moveBy(0,-j); V7U?R8K7j+M2W
  self.moveBy(-j,0);V1c~/A {n
  }Qw+@9es8T]'p
  } D&XW'W)a;zb `
  }EX'J(Y8h#K7T&j(S D
  </Scrip> p%Nw^G._i
  <body bgColor=#ffffff onload=move(280)>2AR7[bj9_d6_F&m!d
  </body>7J.Bh/i"Zc0d
  </head>sGW8XC [6_c`0bV

.W#Vv9q8sUm   11.表格的半透明显示效果
uN/q.MPuD3U T,L t [-h6q#r:z$K \/C;b1` _m
  在<head></head>之间加上如下代码:
}!D X"vm-X m1h
W2abI }liA   2D'n1a)wt"]#?z
?eFs(@
  在<body></body>之间加上如下代码:E|/r5? S1b
  <table border="1" width="100" height="62"  class="alpha" bgcolor="#F2A664" >'^6dF.eH9OX"`]
  <tr>;_BT v1Z(wU
  <td width="100%" height="62">'\,OP G*?Q2z)J T
  <div align="center">很酷吧!</div>6{PSukM
  </td>
]2C)Ts5sM.c4|D   </tr>/rK M-W-E i:z
  </table>

页: [1]
【捌玖网络】已经运行:


Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.