捕風之巢

          統(tǒng)計

          留言簿(3)

          java友情鏈接

          閱讀排行榜

          評論排行榜

          CSS 濾鏡應用集錦 -- 巧用CSS的 BlendTrans 濾鏡

          BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些,它只有一個參數(shù):Duration 變換時間,它的功能也比較單一,就是產(chǎn)生一種淡入淡出的效果,不過它的這種效果比起RevealTrans濾鏡的淡入淡出效果來要精細的多,你看看下面也就不言而喻了。

          由于是動態(tài)轉(zhuǎn)換,上面只是我抓的三張圖片,只能幫助你了解其轉(zhuǎn)換過程,真正的效果只有待你按我下面講的方法動手做出來才能看到。使用BlendTrans濾鏡也和Revealtrans濾鏡一樣,需要借助于Javascript來調(diào)用它的方法來實現(xiàn),我們現(xiàn)在就以實現(xiàn)上面這種效果為例來看看如何使用 BlendTrans濾鏡,首先你必須準備幾張同樣大小的圖片。

          制作方法:
          1、用老辦法(前面的文章已介紹了多次)制作一個BlendTrans濾鏡,取名為“myblen",Duration設置為“3"(即轉(zhuǎn)換時間為3秒),濾鏡設置好后,在網(wǎng)頁源代碼的< head >與< /head >之間將有下面這樣的代碼:
          < style type="text/css" >
          < !--
          .myblen { filter:blendTrans(Duration=3)}
          -- >
          < /style >
          2、插入第一張圖片,在圖片的屬性面板上給圖片加個名稱:myimg;
          3、把BlendTrans濾鏡加載到圖片上;這時圖片的“img"標記的代碼是這樣的:< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg">;
          4、在網(wǎng)頁的源代碼< head >與< /head >之間插入下面這段Javascript程序:
          < script language="JavaScript" >
          < !--
          // 獲取數(shù)組記錄數(shù)
          function ImgArray(len)
          {
          this.length=len;
          }
          // 申明數(shù)組并給數(shù)組元素賦值,也就是把圖片的相對路徑保存起來,若是圖片較多,可增加數(shù)組元素的個數(shù),
          // 我在這個例子中只用了三張圖片,所以數(shù)組元素個數(shù)為“3"。
          ImgName=new ImgArray(3);
          ImgName[0]="image/cssp2.jpg";
          // 你在制作時要把這里的"image/cssp2.jpg"換成你的圖片所在的路徑和圖片文件名;
          ImgName[1]="image/cssp3.jpg";
          // 你在制作時要把這里的"image/cssp3.jpg"換成你的圖片所在的路徑和圖片文件名;
          ImgName[2]="image/cssp1.jpg";
          // 你在制作時要把這里的"image/cssp1.jpg"換成你的圖片所在的路徑和圖片文件名;
          var i=1;
          // 演示變換效果
          function playImg()
          {
          if (i==2)
          { i=0 ;}
          else
          { i++; }
          myimg.filters[0].apply(); // 這里的“myimg”是你在網(wǎng)頁中插入的那張圖片的代號,
          myimg.src=ImgName[i]; // 當你改變了插入的圖片代號時,這里也一定要改變,
          myimg.filters[0].play(); // 否則,程序在變換時可就找不著北了。
          // 設置演示時間,這里是以毫秒為單位的,所以“6000"是指每張圖片的演示時間是6秒鐘,這個時間值要在于
          // 濾鏡中設置的轉(zhuǎn)換時間值,這樣當轉(zhuǎn)換結(jié)束后還停留一段時間,讓人看清楚圖片。
          mytimeout=setTimeout("playImg()",6000);
          }
          -- >
          < /script >
          5、在網(wǎng)頁源代碼的< body >加入這樣的一句代碼:onload="playImg()"。
          好了,快按F12欣賞你的杰作吧。
          若是想在圖片上獲得上一篇介紹的RevealTrans濾鏡效果,只要把本例中的濾鏡代碼換一換就行了,動手試試吧!

          posted on 2006-10-30 17:33 捕風 閱讀(279) 評論(0)  編輯  收藏 所屬分類: web 頁面開發(fā)

          主站蜘蛛池模板: 如东县| 宁安市| 安阳市| 西宁市| 苏州市| 名山县| 碌曲县| 奎屯市| 丰城市| 漯河市| 德清县| 新巴尔虎左旗| 嘉善县| 鄂托克前旗| 保定市| 揭阳市| 东明县| 甘德县| 富阳市| 高尔夫| 淮阳县| 会宁县| 永修县| 南丹县| 藁城市| 德昌县| 浪卡子县| 连云港市| 兴义市| 志丹县| 临城县| 松原市| 平遥县| 平顺县| 北票市| 嘉义市| 禄丰县| 宜昌市| 宁海县| 高碑店市| 绥德县|