放大器

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        .box{
            width:450px;
            height:600px;
            border:1px solid #333;
            margin:100px;
            position:relative;
        }
        .box>.show{
            width:450px;
            height:450px;
            border-bottom:1px solid #333;
            position:relative;
            /* cursor:not-allowed; */
            cursor:none; n
        }
        .box>.show>.mask{
            width:200px;
            height:200px;
            background-color: rgba(120,120,120,0.5);
            position:absolute;
            left:10px;
            top:10px;
            display:none;
            pointer-events:none;
        }
        .box>.show>.mask.active{
            display:block;
        }
        .box>.magnifier{
            width:500px;
            height:500px;
            border:1px solid blue;
            position:absolute;
            top:0;
            left:110%;
            display:none;
            background: url('./imgs/big.jpg') no-repeat;
            background-position: 0 0;
            background-size:800px 800px;
        }
        .box>.magnifier.active{
            display:block;
        }
        .box>.list{
            /* width:100%; */
            height:149px;
            padding:48px 40px;
            box-sizing:border-box;
        }
        .list>p{
            width:54px;
            height:54px;
            float:left;
            margin-right:20px;
            border:none;
            border:1px solid transparent;
            cursor:copy;
        }
        .list>p.active{
            border:1px solid rebeccapurple;
        }
        img{
            width:100%;
            height:100%;
            display:block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="show">
            <img src="./imgs/show.jpg" alt="">
            <div class="mask"></div>
        </div>

        <div class="magnifier"></div>

        <div class="list">
            <p class='active'><img src="./imgs/small.jpg" alt="" srcset="" data-show='./imgs/show.jpg' data-magnifier='./imgs/big.jpg'></p>
            <p><img src="./imgs/small1.jpg" alt="" data-show='./imgs/show1.jpg' data-magnifier='./imgs/big1.jpg'></p>
        </div>
    </div>
    <script src="./magnifier.js"></script>
    <script>
        var magnifier=document.querySelector('.magnifier')
        console.log(magnifier.parentNode)
        
        let b=new Magnifier('.box')
        b.init()
        // b.getProperty()
        // b.overOut()
        // b.tinkerScale()
        // b.move()
        // b.bindEvent()
        console.log(b)
    </script>
</body>
</html>

function Magnifier(elem){
    this.elem=document.querySelector(elem)
    this.show=this.elem.querySelector('.show')
    this.magnifier=this.elem.querySelector('.magnifier')
    this.list=this.elem.querySelector('.list')
    this.mask=this.elem.querySelector('.show>.mask')
    this.ps=this.list.querySelectorAll('p')
}

Magnifier.prototype.overOut=function(){
    this.show.addEventListener('mouseover',()=>{
        this.mask.classList.add('active')
        this.magnifier.classList.add('active')
    })
    this.show.addEventListener('mouseout',()=>{
        this.mask.classList.remove('active')
        this.magnifier.classList.remove('active')
    })
}

Magnifier.prototype.getProperty=function(){
    this.maskWidth=parseInt(window.getComputedStyle(this.mask).width)
    this.maskHeight=parseInt(window.getComputedStyle(this.mask).height)
    this.showWidth=this.show.offsetWidth
    this.showHeight=this.show.offsetHeight
    const bg=window.getComputedStyle(this.magnifier).backgroundSize.split(/\b/)
    this.bgWidth=parseInt(bg[0])
    this.bgHeight=parseInt(bg[2])
}
Magnifier.prototype.tinkerScale=function(){
    // const maskWidth=this.mask.offsetWidth
    this.magnifierWidth=this.bgWidth*this.maskWidth/this.showWidth
    this.magnifierHeight=this.bgHeight*this.maskHeight/this.showHeight
    this.magnifier.style.width=this.magnifierWidth+'px'
    this.magnifier.style.height=this.magnifierHeight+'px'
}

Magnifier.prototype.move=function(){
    this.show.addEventListener('mousemove',(e)=>{
        // this.mask.classList.add('active')
        let x=e.offsetX-100
        let y=e.offsetY-100
        if(x<0) x=0
        if(y<0) y=0
        if(x>this.showWidth-this.maskWidth) x=this.showWidth-this.maskWidth
        if(y>this.showHeight-this.maskHeight) y=this.showHeight-this.maskHeight
        this.mask.style.left=x+'px'
        this.mask.style.top=y+'px'
        console.log(e.offsetX,e.offsetY)

        const X=this.magnifierWidth/this.maskWidth*x
        const Y=this.magnifierHeight/this.maskHeight*y
        this.magnifier.style.backgroundPosition=`-${X}px -${Y}px`
    })
}
Magnifier.prototype.bindEvent=function(){
    this.list.addEventListener('click',e=>{
        console.log(e.target,e.target.nodeName,e.target.nodeType,e.target.nodeValue )
        if(e.target.nodeName === 'IMG'){
            console.log(this.list.children)
            for(let i=0;i<this.list.children.length;++i){
                this.list.children[i].classList.remove('active')
            }
            e.target.parentElement.classList.add('active')
            const showImg=e.target.dataset.show
            const magnifierImg=e.target.dataset.magnifier
            this.show.firstElementChild.src=showImg
            this.magnifier.backgroundImage=`url(${ magnifierImg })`
            // console.log(this.ps)
            // for(let p of this.ps){
            //     p.classList.remove('active')
            // }
            // e.target.parentNode.classList.add('active')
            // console.log(e.target.parentNode)
        }
    })
}
Magnifier.prototype.init=function(){
    this.getProperty()
    this.overOut()
    this.tinkerScale()
    this.move()
    this.bindEvent()
}