巧用CSS濾鏡制作絢麗圖片播放效果_CSS教程
      
編輯Tag賺U幣
      


      教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
      


      


    CSS中有revealTrans濾鏡在網(wǎng)頁(yè)中制作特效非常有用處。這次，我們預(yù)備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。 

      　　實(shí)現(xiàn)思路：使用revealTrans濾鏡制作出超弦圖片播放的效果，并每張圖片有各自的鏈接地址。

      　　制作方法：

      　　1、在<head>中插入JS代碼：

      


      

    

        
      

            <SCRIPT language=JavaScript1.2> 
      function reapply(){ 
      setTimeout("slideit()",800) 
      return true 
      } 
      window.onerror=reapply 
      </SCRIPT> 
      <SCRIPT language=JavaScript1.1> 
      <!-- 
      //preload images 
      var image1=new Image()   
      image1.src=圖片地址" 
      var image2=new Image() 
      image2.src=圖片地址" 
      var image3=new Image() 
      image3.src=圖片地址" 
      var image4=new Image() 
      image4.src=圖片地址" 
      var image5=new Image() 
      image5.src=圖片地址" 
      var image6=new Image() 
      image6.src=圖片地址" 
      var image7=new Image() 
      image7.src=圖片地址" 
      var image8=new Image() 
      image8.src=圖片地址" 
      var image9=new Image() 
      image9.src=圖片地址" 
      //--> 
      </SCRIPT>      		

        
      

          


      


      　　其中：images/圖片地址為顯示圖片的路徑，可按實(shí)際情況修改。

      　　2、在<body>中插入代碼：onload=slideit()

      　　3、在頁(yè)面中插入圖片。

                  并在圖片<img>中插入：style="FILTER: revealTrans(Duration=2, Transition=23)"，并命名為：name=slide  
      　　完整代碼：<img src=連接地址"images/圖片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>

      　　4、給圖片加超鏈接：<a href="JavaScript:slidelink()">

      　　5、加入代碼：
      


      

    

        
      

            <SCRIPT> 
      <!-- 
      ////change number of images below  
      var number_of_images=9 
      //change speed below (in seconds) 
      var speed=3 
      var step=1 
      var whichimage=1 
      function slideit(){ 
      if (!document.images)   
      return 
      if (document.all) 
      slide.filters.item(0).Apply() 
      document.images.slide.src=eval("image" step ".src") 
      if (document.all) 
      slide.filters.item(0).Play() 
      whichimage=step 
      if (step<number_of_images) 
      step   
      else 
      step=1 
      if (document.all) 
      setTimeout("slideit()",speed*1000 3000) 
      else 
      setTimeout("slideit()",speed*1000) 
      } 
      function slidelink(){ 
      if (whichimage==1) 
      top.location.href=圖片地址"/index.HTML" 
      if (whichimage==2) 
      top.location.href=圖片地址"/news.HTML"  
      if (whichimage==3) 
      top.location.href=圖片地址"/game.HTML"  
      if (whichimage==4) 
      top.location.href=圖片地址"/music.HTML"  
      if (whichimage==5) 
      top.location.href=圖片地址"/sport.HTML"  
      if (whichimage==6) 
      top.location.href=圖片地址"/radio.HTML"    
      if (whichimage==7) 
      top.location.href=圖片地址"/travel.HTML"  
      if (whichimage==8) 
      top.location.href=圖片地址"/card.JSP"  
      else if (whichimage==9) 
      top.location.href=圖片地址"/study.HTML"  
      } 
      </SCRIPT>      		

        
      

          


      


      　　其中：各鏈接地址相對(duì)應(yīng)<head>中插入的JS代碼中的圖片。

      　　注重，頁(yè)面地址必須與圖片張數(shù)相對(duì)應(yīng)。      


      

      



      


      來(lái)源：模板無(wú)憂//所屬分類：CSS教程/更新時(shí)間：2007-11-08


      

      



      


      



      相關(guān)CSS教程：