javascript实现网页图片逐渐清晰

╰半夏微凉° 2022-09-21 15:21 176阅读 0赞

**原理分析：**  
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>

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现网页关灯效果

JavaScript实现网页关灯效果案例池子： [JS实现鼠标悬停变色 ][JS_] [JavaScript中的排他算法实现按钮单选][JavaScript

约定不等于承诺〃/ 2024年03月31日 16:10/ 0 赞/ 65 阅读

相关 JavaScript实现网页拍照功能

随着现代浏览器的发展，JavaScript提供了许多强大的API，使得在网页上实现拍照功能变得相对简单。在本文中，我将详细介绍如何使用JavaScript编程实现网页拍照功能，

缺乏、安全感/ 2024年02月24日 08:11/ 0 赞/ 56 阅读

相关 JavaScript实现网页文本复制

写在前面今天想借鉴一下网络上文章，摘录（copy）一部分内容，结果竟然弹出收费窗口，这我哪里答应！下面，就把一个生活小妙招交给大家！问题解决 1. 打开网页

客官°小女子只卖身不卖艺/ 2022年11月02日 11:49/ 0 赞/ 127 阅读

相关 JavaScript图片切换实现

![效果图][SouthEast] html代码 <div id="pic"> <img src="" alt="" />

绝地灬酷狼/ 2022年09月30日 15:59/ 0 赞/ 256 阅读

相关 jquery中fadein函数实现图片逐渐清晰显示

开始时设置图片不显示，然后调用fadeIn，图片逐渐显示出来。 <!DOCTYPE html> <html> <head> <script s

傷城~/ 2022年09月21日 15:21/ 0 赞/ 186 阅读

相关 javascript实现网页图片逐渐清晰

原理分析： 1.需要显示的图片正常显示 2.设置一个空的div，用来放一个透明层，逐渐调节透明层的透明度，实现图片逐渐清晰的显示注意：透明层补需要在图片的上

╰半夏微凉°/ 2022年09月21日 15:21/ 0 赞/ 177 阅读

相关图片由模糊到清晰

在加载一些大图时，一般有个先有一个模糊的图片，然后逐渐变清晰的效果，用处可能是提高用户体验，先让用户看到一个模糊的图片然后再逐渐加载大图。这张模糊的图是大图的一个

Dear 丶/ 2022年08月17日 14:15/ 0 赞/ 203 阅读

相关 javaScript实现图片滚动

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title>Demo Te

迷南。/ 2022年08月10日 11:49/ 0 赞/ 198 阅读

相关鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

曾经终败给现在/ 2022年06月12日 10:52/ 0 赞/ 274 阅读

相关原生JavaScript实现网页计时器

计时器的功能就是以秒为单位分别累加计时。其中提供了三个功能。计时：时间归零并开始计时；暂停：暂停当前计时器；继续：对暂停的计时器在当前时间上继续计时。时间格式是X时X分X秒。

阳光穿透心脏的1/2处/ 2022年05月19日 01:24/ 0 赞/ 396 阅读