案例:二维码的显示和隐藏

最新推荐文章于 2025-07-22 02:35:49 发布

原创最新推荐文章于 2025-07-22 02:35:49 发布 · 2.9k 阅读

7 ·

CC 4.0 BY-SA版权

四.WebAPI 专栏收录该内容

4 篇文章

订阅专栏

本文通过案例介绍如何在鼠标移入二维码小图标时显示大图，移开时隐藏。主要思路包括获取页面元素，利用onmouseover事件显示二维码，onmouseout事件隐藏二维码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说,先看效果:
在这里插入图片描述

目标需求:

（1）当鼠标移动到二维码小图标上时，显示二维码大图;
（2）当鼠标移开时，隐藏大图;

思路分析：

1.首先:先获取页面元素

 var small=document.getElementById('small');
    var big=document.getElementById('big');

第一个事件类型-鼠标移入
onmouseover:鼠标移入,设置big的display属性为block则显示

    small.onmouseover=function (  ) {
        //2.1设置big的display属性为block则显示
        big.style.display='block';
    }

第二个事件类型-鼠标移出
onmouseout:设置big的display属性为none则不显示

    small.onmouseout=function (  ) {
        //3.1设置big的display属性为none则不显示
        big.style.display='none';
    }

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #small {
            width: 50px;
            height: 50px;
            background: url("images/bgs.png") no-repeat -159px -51px;
            position: fixed;
            top: 40%;
            right: 10px;
        }
        #big {
            width: 210px;
            height: 210px;
            position: absolute;
            left: -210px;
            display: none;
        }
        #big img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="small">
    <div id="big">
        <img src="images/hmewm.jpg" alt="">
    </div>
</div>
<script>
    //1.获取页面元素
    var small=document.getElementById('small');
    var big=document.getElementById('big');
    //2.给元素small添加鼠标移入事件
    small.onmouseover=function (  ) {
        //2.1设置big的display属性为block则显示
        big.style.display='block';
    }

    //3.给元素small添加鼠标移出事件
    small.onmouseout=function (  ) {
        //2.1设置big的display属性为none则不显示
        big.style.display='none';
    }
</script>
</body>
</html>