⽤CSS实现⿏标单击特效
如果你能很好地应⽤CSS,那么你的主页将被打扮得很靓。下⾯就给⼤家介绍⽤CSS做出的⼀个⿏标单击特殊效果图。
1、将下⾯的代码复制到你的主页中和之间。
〈STYLE〉.shadow {
  FILTER: shadow(color=blue,direction=225)
  }css鼠标点击样式
  .shadow1 {
  FILTER: shadow(color=red,direction=225)
  }
  .shadow2 {
  FILTER: shadow(color=green,direction=225)
  }
  .div {
  CURSOR: move; FILTER: blur(add=ture,direction=135,strength=10); WIDTH: 800px
  }
  〈/STYLE〉
在这⾥应⽤的是blur滤镜。
2、在页⾯中插⼊⼀张图⽚,⽐如我插⼊是〈img border="0" src="/Article/UploadPic/2005-9/200598478474.jpg" width="300" height="210"〉。在其前加⼊〈TD id=flttgt width=315〉。
在刚才我们插⼊图⽚下⼀⾏中加⼊〈TD width=314〉
3、在设置了图⽚属性后,我们还要应⽤Javascript脚本代码,也就是使图⽚跟随⿏标移动⼀些特效,代码如下。
〈script language=Javascript〉
  〈!--
  var g_numlights=0;
  var blurbs= new Array(" 现在的动态滤镜赋予了⽹页更多的交互性能来响应⽤户的动作。"," 我们使⽤了光源滤镜来响应⽤户的点击。点击图⽚可以增加光源。"," 通过捕捉⽤户⿏标位置的⽅法来移动光源。"," 不需要太多的编程。");
  load=setlights;
  lick=keyhandler;
  usemove=mousehandler;
  function setlights(){
  flttgt.filters[0].clear();
  flttgt.filters[0].addcone(0,0,5,100,100,225,225,0,60,15);
  if (g_numlights>0){
  flttgt.filters[0].addcone(400,170,5,100,100,225,0,0,160,15);
  if (g_numlights>1){
  flttgt.filters[0].addcone(320,330,5,100,100,0,225,225,60,15);
  }
  }
  }
  function keyhandler()
  {
  g_numlights=(g_numlights+=1)%4;
  holder.innerHTML=blurbs[g_numlights];
  setlights();
  }
  function mousehandler()
  {
  x=(window.event.x-80);
  y=(window.event.y-80);
  flttgt.filters[0].movelight(1,x,y,5,1);
  if(g_numlights>0){
  flttgt.filters[0].movelight(1,x,y,5,1);
  if(g_numlights>1)
  {
  flttgt.filters[0].movelight(2,x,y,5,1);  }
  }
  }
  〈/script〉
这样就设置好⼀个⽐较有个性的图⽚特效