放大镜案例

Posted 2020-11-23 xiaofuli

css

 * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        .box {
            width: 450px;
            margin: 30px;
            display: flex;
            flex-direction: column;
            position: relative;
            border: 2px solid orange;
        }
        
        .show {
            width: 450px;
            height: 450px;
            position: relative;
        }
        
        .mast {
            width: 150px;
            height: 150px;
            background: rgba(231, 177, 27, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: none;
            display: none;
        }
        
        ul {
            width: 100%;
            height: 90px;
            border-top: 2px solid orange;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 15px 20px;
        }
        
        ul>p {
            width: 54px;
            height: 54px;
            margin-right: 20px;
        }
        
        ul>p.active {
            border: 2px solid red;
        }
        
        .enlarge {
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 105%;
            background: url(./imgs/1.big.jpg) no-repeat;
            background-size: 800px 800px;
            display: none;
        }

html

  <div class="box" id="enlarge">
        <div class="show">
            <img src="imgs/1.jpg" alt="">
            <div class="mast"></div>
        </div>
        <ul class="list">
            <p class="active"> <img data-src="./imgs/1.big.jpg" data-show-src="./imgs/1.jpg" src="imgs/1.small.jpg" alt=""></p>
            <p> <img data-src="./imgs/2.big.jpg" data-show-src="./imgs/2.jpg" src="imgs/2.small.jpg" alt=""></p>
        </ul>
        <div class="enlarge"></div>
    </div>

    <script src="./index.js"></script>
    <script>
        const e = new Enlarge(‘enlarge‘)
        console.log(e)
    </script>

js

function Enlarge(id) {
    this.ele = document.querySelector(‘#‘ + id)
    this.show = this.ele.querySelector(‘.show‘)
    this.mast = this.ele.querySelector(‘.mast‘)
    this.enlarge = this.ele.querySelector(‘.enlarge‘)
    this.list = this.ele.querySelector(‘list‘)
    this.ps = this.ele.querySelectorAll(‘p‘)
    this.into()
}
Enlarge.prototype.into = function() {
    this.backSize()
    this.mouseOut()
    this.mouseMove()
    this.clickChange()

}


Enlarge.prototype.mouseOut = function() {
    this.show.addEventListener(‘mouseover‘, () => {
        this.mast.style.display = ‘block‘
        this.enlarge.style.display = ‘block‘
    })
    this.show.addEventListener(‘mouseout‘, () => {
        this.mast.style.display = ‘none‘
        this.enlarge.style.display = ‘none‘
    })
}



Enlarge.prototype.mouseMove = function() {
    this.show.addEventListener(‘mousemove‘, e => {
        e = e || window.event
        const mastX = this.mast.offsetWidth
        const mastY = this.mast.offsetHeight
        const showX = this.show.offsetWidth
        const showY = this.show.offsetHeight
        let moveX = e.pageX - this.ele.offsetLeft - mastX / 2
        let moveY = e.pageY - this.ele.offsetTop - mastY / 2
        if (moveX <= 0) {
            moveX = 0
        }
        if (moveY <= 0) {
            moveY = 0
        }
        if (moveX >= showX - mastX) {
            moveX = showX - mastX
        }
        if (moveY >= showY - mastY) {
            moveY = showY - mastY
        }
        this.mast.style.left = moveX + ‘PX‘
        this.mast.style.top = moveY + ‘px‘
            // 背景图移动的距离 = 放大镜盒子尺寸 * 遮罩层移动的距离 / 遮罩层的尺寸
        const bgX = this.enlarge.offsetWidth
        const bgY = this.enlarge.offsetHeight
        const x = bgX * moveX / mastX
        const y = bgY * moveY / mastY
        this.enlarge.style.backgroundPosition = `-${x}px -${y}px`
    })
}


Enlarge.prototype.backSize = function() {
    const mastX = parseInt(getComputedStyle(this.mast).width)
    const mastY = parseInt(getComputedStyle(this.mast).height)
    const showX = this.show.offsetWidth
    const showY = this.show.offsetHeight
        // 放大镜盒子 = 遮罩层盒子 * 背景图尺寸 / show 盒子
    const bgX = parseInt(getComputedStyle(this.enlarge).backgroundSize.split(‘ ‘)[0])
    const bgY = parseInt(getComputedStyle(this.enlarge).backgroundSize.split(‘ ‘)[1])
    const x = mastX * bgX / showX
    const y = mastY * bgY / showY
    this.enlarge.style.width = x + ‘px‘
    this.enlarge.style.height = y + ‘px‘

}
Enlarge.prototype.clickChange = function() {
    const _this = this
    for (let i = 0; i < this.ps.length; i++) {
        this.ps[i].addEventListener(‘click‘, function() {
            _this.ps.forEach(item => item.className = ‘‘)
            this.className = ‘active‘
            const showI = this.firstElementChild.getAttribute(‘data-show-src‘)
            const bgI = this.firstElementChild.getAttribute(‘data-src‘)
            _this.show.firstElementChild.setAttribute(‘src‘, showI)
            _this.enlarge.style.backgroundImage = `url(${bgI})`
        })

    }
}