捌玖网络工作室's Archiver

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

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

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

ovP$]f4I6t   高级篇
L[ `!`f;G5_e
#Y)M-t!H s}o-T   1.不同时间段显示不同问候语l"d2u pk
/}4v/Q5AjZnW
  
UYej+v$Y "^1Z$r0OMi(e
  2.水中倒影效果^'L^ ^1\W8pzI u
c`"UU)c.P#`jVVf
  <img id="reflect" src="你自己的图片文件名" width="175" height="59">
L _4o5D3PA1L4?O2|    x|2W%Z X.F
WQd3H7`,M(_~Z [L
  3.慢慢变大的窗口
%Shy0sp7{G)n
6R/It#o1G&a5I6i   o)^,R(TJ u
  <p><a href="javascript:openwindow('http://89w.org')">进入</a>
'\FP&m/wA0f
2Gj Y/?~"S L Q   4.改变IE地址栏的IE图标*O$]UD!r4d.s]A

&Z0^y&C Ln*~   我们要先做一个16*16的icon(图标文件),保存为index.ico。把这个图标文件上传到根目录下并在首页<head></head>之间加上如下代码:
!v-f+~ ~1T
xJ c:o+K   <link REL = "Shortcut Icon" href="index.ico">
PljoM] H 5.让网页随意后退5M!~a$S*h$B yG^ tE
c&[Vz3oR J
  <a href="javascript:history.go(-X)">X</a> //把X换成你想要后退在页数
8S*X(@ d~S            //把“-”变成“+”就为前进
9J'O8f f'\&s4V 6N"ps u3N`
  6.鼠标指向时弹出信息框
cK}?)Ngg )kA:}o4zW!{
  在<body></body>之间加上如下代码:rCzS%Fe
pj'd[a'w$c
  <a href>显示的链接文字</a>'f[ {? |@G~V,l-q

{ h!P n$m   7.单击鼠标右键弹出添加收藏夹对话框PNq*nm0F] @
h1AW.u*`|}g
  在<body></body>之间加上如下代码:
W | } mNI
1E^fQ HLG   *w:tvp^6`.M
c U8i*]4F5J A~O(Z x
  8.随机变换背景图象(一个可以刷新心情的特效)WKi*|)P"S M7O!r,B w

{'^$k;w Bd;i   在<head></head>之间加上如下代码:
;U[;Lp9o2NI*AB l"X6Yc-{8T }
  :R{4cX)T E kl2ZR}
e&K W N-} sl
  9.鼠标一碰就给颜色看的链接
NN {$a0\9Y3yN
J-`C7K4qF   在<body></body>之间加上如下代码:
HM _xKc$r
2v2WH[N.h^0Tbt!M   <p>你敢碰我,我就给点颜色你看!</p>
%u#DO$E}t9K m/F   !N5S ~z xt'hA9@

Xi\g8H}   10.从天而降并有幻影效果的窗口w(c)e xYhN5j I `\
.Dd6?1r@&c'w/s9L"`
  <head>
2J0v \Z2]!tip[   <Script language="javascript">7`Z-F#WyN/pi
  function move(x) {tTFPsMd
  if(self.moveBy){
(GT(~:@.Je](K.H8e&KM O   self.moveBy (0,-800);
.C'A RKr4l   for(i = x; i > 0; i--)
+K~Wv,S9U u   {~V@? W;ZiQ C Wc n
  self.moveBy(0,3);
xO5_D-Yy   }4jEY)dA
  for(j = 200; j > 0; j--){  //如果你认为窗口抖动厉害,就200换成个位数h;i4sP"D1G2N-B
  self.moveBy(0,j);"T3c6Aa{\5X
  self.moveBy(j,0);$V b@zk)s&J(C'Xu
  self.moveBy(0,-j);6l:Z^yr$g&R8K.tr
  self.moveBy(-j,0);
{;} x9AP G!V!~   } r1c*^C2R3r
  }
Z4D:FOYa6} o   }
!A0c7S'j1Tm   </Scrip>
2Pt$Ftgybn   <body bgColor=#ffffff onload=move(280)>
&^Wm&syG   </body> V5Y`};m}#DNs9fM2E
  </head>C f6I1r&r m3w

"AE?-I3c6P   11.表格的半透明显示效果Q,K#BI_B
F(J}9Q iL6e;T L
  在<head></head>之间加上如下代码:
.fJB5^P[ S|+y4\*h C
  
XFa b7B'M!J$L f,lcp$kM6o
  在<body></body>之间加上如下代码:
tU8N'g({/?9U3Z}   <table border="1" width="100" height="62"  class="alpha" bgcolor="#F2A664" >
1lh7J p4u(e   <tr>+rpw I'd$SN
  <td width="100%" height="62">
+d:^&s#l*_?g8jy#x(RB   <div align="center">很酷吧!</div>
%XB5tN*l)r   </td>
"H:HY[ V6T,v%qx   </tr>
9W#p"\'P4w?a i   </table>

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


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