html+css+JavaScript最最最简易图片放大器——随手练

IamCoder-

已于 2022-02-20 22:28:23 修改

阅读量392

点赞数

文章标签： css3 javascript css

于 2022-02-19 13:36:15 首次发布

本文链接：https://blog.csdn.net/qq_41033258/article/details/123017406

版权

鼠标悬浮小图时，图片会放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易图片放大器</title>
    <style>
        .picture-list img {
            width: 320px;
            height: 120px;
        }
        .big-picture {
            width: 640px;
            height: 320px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="picture-list">
        <img src="img/1.jpg" alt="">     
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
    </div>
    <div class="big-picture"></div>
    <script >   
        let image = document.querySelectorAll('.picture-list img');
        let bigPicture = document.querySelector('.big-picture');
        let picture = document.querySelector('.picture-list');
        for(let i in image){
        image[i].onmouseenter = function(){
            bigPicture.innerHTML = `<img src='${this.src}'>`
        }
        image[i].onmouseleave = function(){
            bigPicture.innerHTML = ""
        }
    }
    </script>
</body>
</html>

IamCoder-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html+css+JavaScript最最最简易图片放大器——随手练

鼠标悬浮小图时，图片会放大<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
复制链接

扫一扫