原生js略缩图实现

最新推荐文章于 2024-06-11 17:10:29 发布

發呆0

最新推荐文章于 2024-06-11 17:10:29 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/weixin_52026870/article/details/113866979

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div,
        div img {
            width: 500px;
            height: 400px;
        }

        div.menu img {
            float: left;
            width: 100px;
            height: 80px;
            margin: 10px;
        }

        .on {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div>
        <img src="./img/1.jpg" alt="">
    </div>
    <div class="menu">
        <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>
</body>
<script>
    /*
        1）点击商品缩略图，显示对应的大图
        2）选做题：
            被选中的缩略图，边框变为红色
    */
    var img = document.getElementsByTagName('img')[0];
    var menu = document.getElementsByClassName('menu')[0];
    var oImgs = menu.getElementsByTagName('img');
    for (let i = 0; i < oImgs.length; i++) {
        oImgs[i].onmouseenter = function () {
            clear();
            this.className='on';
            img.src = "./img/" + (i + 1) + ".jpg"
        }
    };
    function clear(){//清除其他红色边框
    for(var i=0;i<oImgs.length;i++){
        oImgs[i].className="";
    }

    }

</script>

</html>

發呆0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js略缩图实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div, div img { width: 500px; height: 400px; } div.me
复制链接

扫一扫