卡卡網(wǎng)

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

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

1、圖片代碼

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

這里需要在<img>標(biāo)簽后面加上一個(gè)無內(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>

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

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>層的淡入效果。

總結(jié)

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

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

標(biāo)簽: image