使用class方法实现放大镜

最新推荐文章于 2025-04-11 13:19:37 发布

HAI6545

最新推荐文章于 2025-04-11 13:19:37 发布

阅读量437

点赞数 1

分类专栏： JavaScript案例文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122624740

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种基于HTML、CSS和JavaScript实现的图片放大镜效果。通过鼠标悬停在小图上显示放大的局部区域，并随鼠标移动而改变放大内容的位置。文章详细解释了实现原理及代码结构。

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.middle{
    width: 400px;
    height: 400px;
    position: relative;
}
.middle>img{
    width: 400px;
    height: 400px;
}
.middle .mask{
    width: 100px;
    height: 100px;
    background-color: rgba(255,255,0,.7);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}
.big{
    width: 300px;
    height: 300px;
    position:absolute;
    left: 105%;
    top: 0;
    overflow: hidden;
    display: none;
}
.big>img{
    /* 遮罩/中盒子 = 大盒子/大图 */
    width: 1200px;
    height: 1200px;
    position:absolute;
    left:0;
    top: 0;
}
.small img{
    width: 80px;
    height: 80px;
    margin: 20px 10px 0 0;
    border:3px solid transparent;
}
.small img.active{
    border-color: red;
}
.mask:hover{
    cursor: move;
}
</style>
<body>
<div class="enlarge">
    <div class="middle">
        <img src="./images/1.jfif" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="./images/1.jfif" alt="">
        </div>
    </div>
    <div class="small">
        <img class="active" src="./images/1.jfif" alt="">
        <img src="./images/2.webp" alt="">
        <img src="./images/3.jfif" alt="">
    </div>
</div>
</body>
<script>
class Enlarge{
    constructor(selector){
        this.container = document.querySelector(selector);
        this.bigBox = this.container.querySelector('.big')
        this.middleBox = this.container.querySelector('.middle')
        this.bigImg = this.bigBox.querySelector('img')
        this.middleImg = this.middleBox.querySelector('img')
        this.mask = this.container.querySelector('.mask')
        this.smallImgs = this.container.querySelectorAll('.small img')
    }
    init(){
        for(var i=0;i<this.smallImgs.length;i++){
            this.smallImgs[i].onmouseover = this.mouseover(i)
        }
        this.middleBox.onmouseover = () => this.middleBoxOver()
        this.middleBox.onmouseout = () => this.middleBoxOut()
    }
    middleBoxOver(){
        this.mask.style.display = this.bigBox.style.display = 'block'
        this.middleBox.onmousemove = () => this.mouseMove(window.event)
    }
    mouseMove(e){
        // 获取鼠标位置 - 事件对象
        var x = e.pageX
        var y = e.pageY

        var left = x - this.mask.offsetWidth / 2 - this.container.offsetLeft
        var top = y - this.mask.offsetHeight / 2 - this.container.offsetTop

        if(left < 0) left = 0
        if(top < 0) top = 0

        if(left > this.middleBox.clientWidth - this.mask.offsetWidth) left = this.middleBox.clientWidth - this.mask.offsetWidth
        if(top > this.middleBox.clientHeight - this.mask.offsetHeight) top = this.middleBox.clientHeight - this.mask.offsetHeight

        this.mask.style.left = left + 'px'
        this.mask.style.top = top + 'px'

        // 计算大图位置
        this.offsetBig(left, top)
    }
    offsetBig(left, top){
        var bigLeft = -left / this.middleBox.clientWidth * this.bigImg.offsetWidth
        var bigTop = -top / this.middleBox.clientHeight * this.bigImg.offsetHeight
        this.bigImg.style.left = bigLeft + 'px'
        this.bigImg.style.top = bigTop + 'px'
    }
    middleBoxOut(){
        this.mask.style.display = this.bigBox.style.display = 'none'
    }
    mouseover(index){
        return () => this.smallImgTab(index)
    }
    smallImgTab(index){
        for(var i=0;i<this.smallImgs.length;i++){
            this.smallImgs[i].className = ''
        }
        this.smallImgs[index].className = 'active'
        this.middleImg.src = this.bigImg.src = this.smallImgs[index].src
    }
}

var enlarge = new Enlarge('.enlarge')
enlarge.init()
</script>
</html>