卡卡網(wǎng)

網(wǎng)頁里，在一些例如欄目、標簽、產(chǎn)品展示的地方，如果直接顯示圖片，會覺得有點平淡，如果圖片加點由模糊變清晰、淡入淡出的效果，會大大的增強用戶體驗。本文將為你介紹一個js+css實現(xiàn)的方法，代碼簡單易懂，修改起來也很簡單。我們先來看看效果吧：

上面就是圖片有模糊變清晰的效果。這個效果是由js+css實現(xiàn)的。下面介紹代碼：

1、圖片代碼

<img id="img1" src="http://howtostagehomes.com/tutorial/js/demo/demo-fadein-function.jpg" style="width:468px;height:60px;" onload="show(1)" />
<div id="div2" ></div>

這里需要在<img>標簽后面加上一個無內(nèi)容的<div>層。

2、css代碼

<style type="text/css">
  .class{
      width:468px;height:60px;position:absolute;margin-left:0px;*margin-left:-475px;_margin-left:-475px;margin-top:-60px; *margin-top:-0px;_margin-top:-0px;z-index:888;background:#000;
  }
  .class1{
      filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6
  }
  .class2{
      filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2
  }
  .class3{
      filter:alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1
  }
  .class4{
      filter:alpha(opacity=0);-moz-opacity:0;opacity: 0
  }
</style>

以上樣式將應用到<div id="div2"></div>的上面，其中class設置層的位置以及寬和高，而class1到class4設置的是層的透明度。這些數(shù)字需要根據(jù)具體情況適當修改。

3、js代碼

<script type="text/javascript" >
function show(n){
   document.getElementById("div2").className = "class class"+n;
   n = parseInt(n) + 1;
   if(n <= 2)
       ajax_evt = setTimeout("show("+n+")",500);
   else if(n <= 3)
       ajax_evt = setTimeout("show("+n+")",100);
   else
       if (ajax_evt) clearTimeout(ajax_evt);
}
</script>

js代碼是控制<div id="div2"></div>層的淡入效果。

總結

總體來說，這個實現(xiàn)方法是比較簡單易懂的，利用層的透明度遮蓋圖片，實現(xiàn)圖片由模糊變清晰的淡入效果。

圖片加載由模糊變清晰的效果，其實也可以把圖片保存為“漸進式瀏覽器顯示”的格式，這種格式的圖片在加載時會先顯示圖片的輪廓，然后逐漸變得清晰，這個方法估計很多人都沒用過吧?？纯催@里，JPG圖片采用“漸進式瀏覽器顯示”格式。

標簽: image