javascript实现网页图片逐渐清晰

最新推荐文章于 2022-02-09 14:29:04 发布

刘小妞

最新推荐文章于 2022-02-09 14:29:04 发布

阅读量1.2k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/liuwengai/article/details/51747128

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

原理分析：
1.需要显示的图片正常显示
2.设置一个空的div，用来放一个透明层，逐渐调节透明层的透明度，实现图片逐渐清晰的显示
注意：
透明层补需要在图片的上层，所以z-index=1,然后透明层设置一个背景，逐渐调节这个层的透明度，实现渐进显示。
运行过程：
开始的时候调用show（1），然后设置时间每秒调用一次show函数，每次调用的时候n加一，用来改变不同的透明度，当调用4时，透明层已经完全透明，停止调用show函数。

源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片显示逐渐清晰</title>
<style type="text/css"> 
  .class{
      width:200px;height:133px;position:absolute;
      margin-left:0px;*margin-left:-200px;
      _margin-left:-200px;margin-top:-133px;
       *margin-top:-0px;_margin-top:-0px;
       z-index:1;background:#000;
  }
  .class1{
      filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6
  }
  .class2{
      filter:alpha(opacity=40);-moz-opacity:0.4;opacity: 0.4
  }
  .class3{
      filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2
  }
  .class4{
      filter:alpha(opacity=0);-moz-opacity:0;opacity: 0
  }
</style>
</head>
<body>
<img id="img1" src="047.gif" style="width:200px;height:133px;" onload="show(1)" />
<div id="div2" ></div>
<script type="text/javascript" > 
function show(n){
   document.getElementById("div2").className = "class class"+n;
   n = parseInt(n) + 1;
   if(n <= 2)
       change = setTimeout("show("+n+")",1000);
   else if(n <= 4)
       change= setTimeout("show("+n+")",1000);
   else
       if (ajax_evt) 
       {
       clearTimeout(change);        
       }

}
</script>
</body>
</html>