html实现图⽚淡化效果，图⽚由模糊变清晰的淡⼊效果js+css实
现【原创】
⽹页⾥，在⼀些例如栏⽬、标签、产品展⽰的地⽅，如果直接显⽰图⽚，会觉得有点平淡，如果图⽚加点由模糊变清晰、淡⼊淡出的效果，会⼤⼤的增强⽤户体验。本⽂将为你介绍⼀个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;
}
html图片展示特效.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){
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代码是控制
总结
总体来说，这个实现⽅法是⽐较简单易懂的，利⽤层的透明度遮盖图⽚，实现图⽚由模糊变清晰的淡⼊效果。
图⽚加载由模糊变清晰的效果，其实也可以把图⽚保存为“渐进式浏览器显⽰”的格式，这种格式的图⽚在加载时会先显⽰图⽚的轮廓，然后逐渐变得清晰，这个⽅法估计很多⼈都没⽤过吧。看看这⾥，JP
G图⽚采⽤“渐进式浏览器显⽰”格式。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。