用CSS實現按一下滑鼠特效

來源:互聯網
上載者:User

如果你能很好地應用CSS,那麼你的首頁將被打扮得很靚。下面就給大家介紹用CSS做出的一個按一下滑鼠特殊。

1、將下面的代碼複製到你的首頁中和之間。

〈STYLE〉.shadow {
  FILTER: shadow(color=blue,direction=225)
  }
  .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 style="filter: light(enabled=1),''width 300''" width=315〉。

在剛才我們插入圖片下一行中加入〈TD style="VERTICAL-ALIGN: top" width=314〉

3、在設定了圖片屬性後,我們還要應用Javascript指令碼代碼,也就是使圖片跟隨滑鼠移動一些特效,代碼如下。

〈script language=Javascript〉
  〈!--
  var g_numlights=0;
  var blurbs= new Array(" 現在的動態濾鏡賦予了網頁更多的互動效能來響應使用者的動作。"," 我們使用了光源濾鏡來響應使用者的點擊。點擊圖片可以增加光源。"," 通過捕捉使用者滑鼠位置的方法來移動光源。"," 不需要太多的編程。");
  window.onload=setlights;
  document.onclick=keyhandler;
  flttgt.onmousemove=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〉

這樣就設定好一個比較有個性的圖片特效

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.