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

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

目标需求:

（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>

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

目标需求:

思路分析：

猜你喜欢