【HTML】- 鼠标悬停图片时切换查看器

最新推荐文章于 2023-06-28 14:39:57 发布

android_zier

最新推荐文章于 2023-06-28 14:39:57 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/baidu_35701759/article/details/74060030

html 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的图片预览与切换效果。通过鼠标悬停在不同的缩略图上，主展示区的图片会相应地进行更换。此功能适用于产品展示或相册等场景。

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

1.效果

2.代码实现

2.1 HTML：

<div id="box">
    <img id="showImg" src="../image/image_01.jpg">
    <ul id="list">
        <li><a href="#"><img src="../image/image_01.jpg"></a></li>
        <li><a href="#"><img src="../image/image_02.jpg"></a></li>
        <li><a href="#"><img src="../image/image_03.jpg"></a></li>
        <li><a href="#"><img src="../image/image_04.jpg"></a></li>
        <li><a href="#"><img src="../image/image_05.jpg"></a></li>
    </ul>
</div>

2.2 JS:

 <script>
    var img = document.getElementById("list").getElementsByTagName("img")
    var showImg = document.getElementById("showImg");
    for (var i = 0;i < img.length;i++){
        img[i].onmouseover = function () {
            showImg.src = this.src
        }
        img[i].onmouseout = function () {
        }
    }
</script>

2.3 CSS:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #222222;
    }
    #box{
        width: 500px;
        margin: 20px auto;
        text-align: center;
    }
    #box ul{
        list-style: none;

    }
    #box ul:after{
        content: '';
        height: 0;
        visibility: hidden;
        clear: both;
        display: block;
    }
    #box ul li{
        float: left;
    }
    #box ul li a img{
        width:90px;
        margin: 4px;
    }
    #box ul li a img:hover{
        transform: scale(1.03);
        border: 1px solid #ff6666;
        box-shadow: #ff6666 1px 1px 1px ;
    }
</style>