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

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>