用js实现放大镜功能

最新推荐文章于 2024-10-31 15:56:11 发布

小袁在努力

最新推荐文章于 2024-10-31 15:56:11 发布

阅读量489

点赞数

本文链接：https://blog.csdn.net/weixin_48745613/article/details/122146048

版权

关键词由CSDN通过智能技术生成

1.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>放大镜</title>
	    <link rel="stylesheet" href="./css/glass.css">
	</head>

	<body>
	    <div id='galss1' class="container">
	        <div class="g-left-wrap">
	            <div class="m-show-box">
	                    <img src="./image/show_1.jpg" alt="正常图1">
	                <div class="m-mask"></div>
	            </div>
	            <ul class="m-choose-box">
	                <li><img src="./image/small_1.jpg" alt="1"></li>
	                <li><img src="./image/small_2.jpg" alt="2"></li>
	                <li><img src="./image/small_3.jpg" alt="3"></li>
	                <li><img src="./image/small_4.jpg" alt="4"></li>
	            </ul>
	        </div>

	        <!-- 右边放大区域 -->
	        <div class="g-right-wrap">
	            <img src="./image/big_1.jpg" alt="背景图1">
	        </div>
	    </div>

	    <script src="./js/index.js"></script>
	    <script>
	        let glass1 = new Glass('#galss1')
	        glass1.glassMousemove() 
			glass1.glassScale()
			glass1.glassSwitch()
	    </script>
	</body>

	</html>

2.css部分

	* {
	    padding: 0;
	    margin: 0;
	}

	ul,
	li {
	    list-style: none;
	}

	.container {
	    width: 1200px;
	    margin: 100px auto;
	    display: flex;
	}

	.container .m-show-box {
	    position: relative;
	    width: 350px;
	    height: 350px;
	}

	.container .m-mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 200px;
	    height: 200px;
	    background-color: rgba(231, 211, 107, 0.5);
	    pointer-events: none;
	}

	.container .m-choose-box {
	    display: flex;
	    justify-content: space-between;
	}

	.container .g-right-wrap {
	    position: relative;
	    width: 400px;
	    height: 400px;
	    margin-left: 40px;
	    border: 1px solid darkblue;
	    overflow: hidden;
	}

	.container .g-right-wrap>img {
	    position: absolute;
	}

3.js部分

class Glass {
    constructor(id) {
        this.glassRoot = document.querySelector(id) //放大镜根节点
        this.mask = this.glassRoot.querySelector('.m-mask') //遮罩层
        this.showBox = this.glassRoot.querySelector('.m-show-box') //显示show区域
        this.glassBox = this.glassRoot.querySelector('.g-right-wrap') //放大镜区域
        this.bgImg = this.glassRoot.querySelector('.g-right-wrap>img') //背景图片
        this.chooseBox = this.glassRoot.querySelectorAll('.m-choose-box>li') //小图片
        this.showBig = this.glassRoot.querySelector('.m-show-box>img')
    }
    /**
     * 计算放大镜比较
     *    mask          galssBox
     *   -------   =  --------
     *     showbox       bgImg ?
     * 
     *   bgImg = glassBox*showbox/mask
     * 
     * 获取大图片与小图片的等比宽高
     */
    glassScale() {
        //遮罩层的宽.高
        let masxWidth = parseInt(window.getComputedStyle(this.mask).width)
        let masxHeight = parseInt(window.getComputedStyle(this.mask).height)
        console.log('遮罩层的宽 :', masxWidth, '遮罩层的高 :', masxHeight);

        //显示show区域宽.高
        let showBoxWidth = parseInt(window.getComputedStyle(this.showBox).width)
        let showBoxHeight = parseInt(window.getComputedStyle(this.showBox).height)
        console.log('显示show区域宽 :', showBoxWidth, '显示show区域高 :', showBoxHeight);

        //放大镜区域的宽.高
        let glassBoxWidth = parseInt(window.getComputedStyle(this.glassBox).width)
        let glassBoxHeight = parseInt(window.getComputedStyle(this.glassBox).height)
        console.log('放大镜区域的宽 :', glassBoxWidth, '放大镜区域的高 :', glassBoxHeight);

        //计算背景图缩放比例
        let bgImgWidth = glassBoxWidth * showBoxWidth / masxWidth
        let bgImgHeight = glassBoxHeight * showBoxHeight / masxHeight
        console.log('背景图片的宽 :', bgImgWidth, '背景图片的高 :', bgImgHeight);

        //将缩放比例赋值给背景图片
        this.bgImg.style.width = bgImgWidth + 'px'
        this.bgImg.style.height = bgImgHeight + 'px'
    }



    glassMousemove() {
        let _this = this
        /**
         * 设置鼠标移入显示，移出隐藏
         */

        //移入显示
        this.showBox.addEventListener('mouseover', () => {
            this.mask.style.display = 'block'
        })

        //移出隐藏
        this.showBox.addEventListener('mouseout', () => {
            _this.mask.style.display = 'none'
        })

        //鼠标移动
        this.showBox.onmousemove = function (e) {
            e = e || window.event

            /**
             * 获取光标的位置
             */
            let x = e.offsetX - _this.mask.offsetWidth / 2
            let y = e.offsetY - _this.mask.offsetHeight / 2
            // console.log(x, y);

            /**
             * 设置光标界限
             */
            if (x < 0) {
                x = 0
            }
            if (x > _this.showBox.offsetWidth - _this.mask.offsetWidth) {
                x = _this.showBox.offsetWidth - _this.mask.offsetWidth
            }
            if (y < 0) {
                y = 0
            }
            if (y > _this.showBox.offsetHeight - _this.mask.offsetHeight) {
                y = _this.showBox.offsetHeight - _this.mask.offsetHeight
            }


            /**
             * 获取遮罩层的绝对定位位置
             */
            _this.mask.style.top = y + 'px'
            _this.mask.style.left = x + 'px'


            /*
              放大图片移动
                mask          maskmove
                ----    =  -----------  
                glassbox      bgmove
                bgmove = maskmove*glassbox/mask

            */

            //遮罩层的宽.高
            let masxWidth = parseInt(window.getComputedStyle(_this.mask).width)
            let masxHeight = parseInt(window.getComputedStyle(_this.mask).height)
            // console.log('遮罩层的宽 :', masxWidth, '遮罩层的高 :', masxHeight);


            //放大镜区域的宽.高
            let glassBoxWidth = parseInt(window.getComputedStyle(_this.glassBox).width)
            let glassBoxHeight = parseInt(window.getComputedStyle(_this.glassBox).height)
            // console.log('放大镜区域的宽 :', glassBoxWidth, '放大镜区域的高 :', glassBoxHeight);

            //获取移动
            let bgImgMovey = y * glassBoxHeight / masxHeight
            let bgImgMovex = x * glassBoxWidth / masxWidth

            //将移动值赋给大图
            _this.bgImg.style.top = `${ -bgImgMovey}px`
            _this.bgImg.style.left = `${ -bgImgMovex}px`
        }
    }

    glassSwitch() {
        let _this = this
        for (let i = 0; i < this.chooseBox.length; i++) {
            this.chooseBox[i].onclick = function () {
                _this.glassRemove()
                this.classList.add('active')
                _this.showBig.src =  `image/show_${i+1}.jpg`
                _this.bgImg.src = `image/big_${i+1}.jpg`
            }
        }
    }
    glassRemove() {
        for (let i = 0; i < this.chooseBox.length; i++) {
            this.chooseBox[i].classList.remove('active')
        }
    }
}