写好一个放大图的容器,css设置position:fixed,全屏大小,display:none
中间放大图img,右上角放X

 <div id="fullscreen-container">
    <div class="fullscreen-close" onclick="closePreview()"></div>
    <!--下面放大图-->
    <img id="fullscreen-img" class="fullscreen-img" src="">
</div>

<!--这里是小图们-->
<img src="img1.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img2.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img3.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img4.jpg" width="100" height="100" onclick="openPreview(this.src)">

js

 function openPreview(url){
    document.getElementbyId('fullscreen-img').src = url;
    document.getElementbyId('fullscreen-container').style.display = "block";
}
function closePreview(){
    document.getElementbyId('fullscreen-container').style.display = "none";
}

至于鼠标的放大镜效果,可以在小图的css上加 cursor: zoom-in,鼠标移过去就会变成放大镜

全屏容器和大图的css大概是:(尺寸具体自己定)

 .fullscreen-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
.fullscreen-img{
    position: absolute;
    width: 1200px;
    height: 600px;
    top: 50%;
    left: 50%;
    margin-left: -600px;
    margin-top: -300px;
}