网页里，在一些例如栏目、标签、产品展示的地方，如果直接显示图片，会觉得有点平淡，如果图片加点由模糊变清晰、淡入淡出的效果，会大大的增强用户体验。本文将为你介绍一个js+css实现的方法，代码简单易懂，修改起来也很简单。我们先来看看效果吧：
上面就是图片有模糊变清晰的效果。这个效果是由js+css实现的。下面介绍代码：
1、图片代码
这里需要在标签后面加上一个无内容的
层。
2、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
}
以上样式将应用到
3、js代码
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);
}
js代码是控制
总结
总体来说，这个实现方法是比较简单易懂的，利用层的透明度遮盖图片，实现图片由模糊变清晰的淡入效果。
图片加载由模糊变清晰的效果，其实也可以把图片保存为“渐进式浏览器显示”的格式，这种格式的图片在加载时会先显示图片的轮廓，然后逐渐变得清晰，这个方法估计很多人都没用过吧。看看这里，JPG图片采用“渐进式浏览器显示”格式。
