JS 特效学习 002：图片渐显

最新推荐文章于 2021-06-19 05:35:08 发布

打团从来人不齐

最新推荐文章于 2021-06-19 05:35:08 发布

阅读量597

点赞数 3

分类专栏：网站学习文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_38118997/article/details/103652464

版权

网站学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

没图的JS都是耍流氓！！！

一、实现效果：

二、原理分析：

在介绍实现步骤之前，先跟大家说说图像渐显的本质问题：如何实现渐渐显示？

渐显的本质是 改变图像的透明度，从完全透明逐渐增加非透明度，直到完全不透明为止，就实现了图像的渐进显示。通过改变每次增加非透明度的时间，就可以控制渐显时间。

为了实现上述功能，我们一共需要做 三件事情：

使用HTML完成输入框和按钮工具的搭建；
构造JS函数，实现将图像从完全透明转换到完全不透明的功能；
使用JS完成按钮功能到图像渐进显示函数的关联；

三、模块拆解：

提示：由于在之前的博客中介绍过不少的基本语法使用，所以之前博客介绍过的语法在本篇文章中 不重复介绍。在 该章节 (三、模块拆解) 的最后，博主会给出未在本篇博客中介绍的基本语法的 博客链接，请读者们参照相应博客的 《三、模块拆解》 部分进行知识点的补充~

1.HTML 之 <img> ：

<img id="Lina" src="Lina.jpg" alt="Lina">

<img> 元素的功能是在网页中插入一张图片，属性 <src> 代表图像所在的文件路径，属性 <alt> 主要用途是当图片因为某些特殊原因未能加载成功时，会出现文字提示，相信大家应该都见过，例如下图：

<id> 属性顾名思义，即当前元素的引用凭据，当我们希望改变这张图片的属性时，需要借用 <id> 元素来指定当前图片，在本例子中，我们需要改变的属性为透明度。

备注：<img>元素详细讲解(HTML)

2.CSS 之 <object.style.opacity> ：

var Lina = document.getElementById("Lina")
Lina.style.opacity = 0;

<object.style.opacity> 方法的功能是设置图像的透明度，根据给定数字的不同，会在网页中显示出不同透明程度的图像。在上述代码中，第一行代码完成了获取图像目标的功能，第二行代码改变了获取图像的透明度，并将其设置为0。在该属性中，0代表完全透明，1代表完全不透明，图像透明度由0连续变化到1的过程，即实现了图像渐渐显示的效果。

备注：<object.style.opacity>属性详细讲解(CSS)

3.JavaScript 之 Show()：

function Show(){
    clearInterval(count_flag);
    count = 0;
    count_flag = setInterval("Opacity_Change()",20);
}

上述代码中 Show() 函数的功能是每间隔20ms调用一次 Opacity_Change() 函数来改变图片的透明度。在改变透明度之前，Show() 需要清空标志位和计数器以保证循环操作的顺利执行。

<setInterval> 方法的功能是每间隔一定时间执行一定操作。例如上述代码的第四行是说每间隔20ms，执行一次 Opacity_Change() 函数，该方法的时间间隔设置单位以毫秒(ms)计算。在调用该方法之后会返回一个标志位，在上文代码中以 count_flag 作为标志位接收容器，如果我们需要停止 <setInterval> 方法，则使用第一行的函数 <clearInterval> 清除 <setInterval> 方法的标志位即可。

备注：<setInterval>方法详细讲解(HTML)
备注：<clearInterval>方法详细讲解(HTML)

4.JavaScript 之 Opacity_Change()：

function Opacity_Change(){
   	count ++;
   	Lina.style.opacity = count/100;
   	if(count == 100){
      	clearInterval(count_flag); 
   	}
}

上述代码中 Opacity_Change() 函数维护了一个名为 count 的计数器，每次调用 Opacity_Change() 函数，该计数器就会+1。根据前文中 <object.style.opacity> 讲解可知，透明度变化范围为0-1，所以 count 计数器需要除以100作为每轮透明度的增加量 (0.01)，也就是说，当 count 计数器达到100的时候，图片变为完全不透明，图像渐变时间为 100*20ms = 2s。当计数器达到100时，便不再需要改变图片的透明度，将 count_flag 标志位接收容器清空，上文中介绍的 Show() 函数运行完毕。

提示：本篇博客中未介绍的语法内容所在博客如下，请到《三、模块拆解》标题下寻找具体内容~
博客链接1：<button>元素(HTML)
博客链接2：<getElementById>方法详解(HTML)
博客链接3：<var>变量详解(JavaScript)
博客链接4：<function>方法详解(JavaScript)

四、整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GraduallyShowImg</title>

    <!-- <style>部分为图像和按钮等元素的位置、大小设置等功能，后续会出单独讲解该部分的博客内容，-->
    <!-- 欢迎大家多多关注！更新后会将链接置于文章最后！ -->
    
    <style>
        .Function_Demo{
            /* 相对于HTML元素（网页） */
            position: absolute;  
            width: 300px;
            height: 400px;
            /* background-color: red; */
        }
        .Function_Demo button{
            /* 相对于Function_Demo元素(自己的上一级)) */
            position: absolute;
            /* 按钮顶端距离Function_Demo最左边沿的距离 */
            top: 370px;
            /* 按钮宽度距离Function_Demo最左边沿的距离 */
            width: 240px;
            /* 按钮左侧距离Function_Demo最左边沿的距离 */
            left: 50%;
            margin-left: -120px;
        }
        .Function_Demo img{
            /* 相对于Function_Demo元素(自己的上一级)) */
            position: absolute;
            width: 240px;
            margin-left: -120px;
            /* 图片左侧距离Function_Demo最左边沿的距离 */
            left: 50%;
        }
    </style>
</head>

<body>
    <div class="Function_Demo">
    
    	<!-- 按钮模块，通过onclick功能实现与JS函数的相关联 -->
        <button type="button" onclick=javascript:Show()>刷新</button>
        
        <!-- 图像插入 -->
        <img id="Lina" src="Lina1.jpg" alt="Lina">
    </div>     
</body>

<script>
	<!-- 全局变量 -->
    var Lina = document.getElementById("Lina")
    var count = 0;
    var count_flag;
	
	<!-- 透明度改变函数 -->
    function Opacity_Change(){
        count ++;
        Lina.style.opacity = count/100;
        if(count == 100){
            clearInterval(count_flag); 
        }
    }
    
	<!-- 显示函数，需要和button按钮相关联 -->
    function Show(){
        clearInterval(count_flag);
        count = 0;
        count_flag = setInterval("Opacity_Change()",20);
    }
    
</script>

</html>