技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

图片由模糊变清晰的淡入效果 js+css实现【原创】

作者:admin    时间:2013-10-22 21:44:45    浏览:

网页里,在一些例如栏目、标签、产品展示的地方,如果直接显示图片,会觉得有点平淡,如果图片加点由模糊变清晰、淡入淡出的效果,会大大的增强用户体验。本文将为你介绍一个js+css实现的方法,代码简单易懂,修改起来也很简单。我们先来看看效果吧:

 

上面就是图片有模糊变清晰的效果。这个效果是由js+css实现的。下面介绍代码:

1、图片代码

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

这里需要在<img>标签后面加上一个无内容的<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设置的是层的透明度。这些数字需要根据具体情况适当修改。

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

总结

总体来说,这个实现方法是比较简单易懂的,利用层的透明度遮盖图片,实现图片由模糊变清晰的淡入效果。

图片加载由模糊变清晰的效果,其实也可以把图片保存为“渐进式浏览器显示”的格式,这种格式的图片在加载时会先显示图片的轮廓,然后逐渐变得清晰,这个方法估计很多人都没用过吧。看看这里,JPG图片采用“渐进式浏览器显示”格式

标签: image  
相关文章
    • IT热文
    • 站长推荐