前端放大镜效果：图片缩放与切换技巧-优快云博客

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .container{
        width: 100%;
        margin-top: 400px;
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        position:relative;
    }
    .fl{
        float:left;
    }
    .content::after{
        content: '';
        display: block;
        clear: both;
    }
    /* .enlarge{
        position: relative;
    } */
    .middle{
        width: 400px;
        height: 400px;
        position: relative;
    }
    .middle>img{
        width: 400px;
        height: 400px;
    }
    .mask{
        width: 100px;
        height: 100px;
        background-color: rgba(255,255,0,.7);
        position:absolute;
        left: 0;
        top: 0;
        display:none;
    }
    .big{
        width: 200px;
        height: 200px;
        position:absolute;
        left: 105%;
        top: 0;
        background-image: url("./images/middle1.jpg");
        background-size: 800px 800px;
        background-position: 0 0;
        display:none;
    }
    .mask:hover{
        cursor: move;
    }
    .small{
        margin-top: 20px;
    }
    .small img{
        border:3px solid #00f;
        margin-right: 10px;
    }
    .small img.active{
        border-color: red;
    }
    .left{
        margin-left: 100px;
    }
    
</style>
<body>
<div class="container">
    <div class="content">
        <div class="left fl">
            <!-- 放大镜 -->
            <div class="enlarge">
                <div class="middle">
                    <img src="./images/middle1.jpg" alt="">
                    <div class="mask"></div>
                    <div class="big"></div>
                </div>
                <div class="small">
                    <img class="active" src="./images/small1.jpg" alt="">
                    <img src="./images/small2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="content">
        <div style="height: 500px;"></div>
    </div>
</div>
</body>
<script>
// 效果
function Enlarge(classname){
    // 构造函数中获取标签作为对象的属性
    this.box = document.querySelector('.'+classname);
    this.middleBox = this.box.querySelector('.middle')
    this.mask = this.box.querySelector('.mask')
    this.bigBox = this.box.querySelector('.big')
    this.smallImgs = this.box.querySelectorAll('.small img')
    this.middleImg = this.box.querySelector('.middle>img')
}
// 添加事件的方法
Enlarge.prototype.init = function(){
    // 给中盒子添加移入移出事件
    this.middleBox.onmouseover = () => {
        this.mask.style.display = this.bigBox.style.display = 'block'
        // 给中盒子添加移动事件
        this.middleBox.onmousemove = () => {
            // 获取鼠标的位置
            var e = window.event
            var x = e.pageX
            var y = e.pageY
            
            this.maskMove(x, y)
            
        }
    }
    this.middleBox.onmouseout = () => {
        this.mask.style.display = this.bigBox.style.display = 'none'
    }
    // 小图点击事件
    for(let i=0;i<this.smallImgs.length;i++){
        this.smallImgs[i].onclick = () => {
            this.tab(i)
        }
    }
}
// 大图移动
Enlarge.prototype.bigImgMove = function(left, t){
    // 设置大图的移动
    // 计算遮罩在中盒子上移动的比例
    var percentX = left / this.middleBox.clientWidth
    var percentY = t / this.middleBox.clientHeight

    // 大图要移动的距离 = 比例 * 大图的宽高
    // 获取大图的宽和高
    var backgroundSize = getComputedStyle(this.bigBox).backgroundSize
    // console.log(backgroundSize);
    var bigImgWidth = parseInt(backgroundSize.split(' ')[0])
    var bigImgHeight = parseInt(backgroundSize.split(' ')[1])
    // console.log(bigImgWidth, bigImgHeight);

    // 计算大图移动的距离
    var bigX = bigImgWidth * percentX
    var bigY = bigImgHeight * percentY

    // 设置大图的定位
    this.bigBox.style.backgroundPosition = `-${bigX}px -${bigY}px`
}
// 遮罩跟随鼠标移动
Enlarge.prototype.maskMove = function(x, y){
    // 计算遮罩的left和top
    var left = x - this.middleBox.offsetLeft - this.mask.offsetWidth / 2 - document.querySelector('.content').offsetLeft
    // console.log(this.middleBox.offsetLeft);
    var t = y - this.middleBox.offsetTop - this.mask.offsetHeight / 2 - document.querySelector('.content').offsetTop
    // 限制left和top
    if(left<0){
        left = 0
    }
    if(t<0){
        t = 0
    }
    if(left > this.middleBox.clientWidth - this.mask.offsetWidth){
        left = this.middleBox.clientWidth - this.mask.offsetWidth
    }
    if(t > this.middleBox.clientHeight - this.mask.offsetHeight){
        t = this.middleBox.clientHeight - this.mask.offsetHeight
    }
    // 设置遮罩的left和top
    this.mask.style.left = left + 'px'
    this.mask.style.top = t + 'px'
    this.bigImgMove(left, t)
}
// 点击小图切换中图和大图
Enlarge.prototype.tab = function(i){
    // 清除所有的active
    for(var j=0;j<this.smallImgs.length;j++){
        this.smallImgs[j].className = ''
    }
    // 给当前img添加active
    this.smallImgs[i].className = 'active'
    // 改变中图和大图
    // 小中大图路径之间的对应关系就是后缀前面的数字
    // 先将小图路径中后缀前的数字获取到 - 正则提取
    // var reg = /.*\d+\.(jpg|png)$/ // 图片的整个路径的正则
    // 需要提取的正则中的数字部分 - 需要给正则中的数字部分加()
    // var reg = /.*(\d+)\.(jpg|png)$/ // .可以代表数字，所以只能提取到一个数字
    // 用 \D表示一个非数字的字符
    var reg = /\D*(\d+)\.(jpg|png)$/
    var arr = reg.exec(this.smallImgs[i].src)
    // console.log(arr);
    var imgNum = arr[1]
    // console.log(imgNum);
    // 根据图片路径后缀前的数字拼接中图和大图的路径
    var middleImgPath = './images/middle' + imgNum + '.' + arr[2]
    var bigImgPath = './images/big' + imgNum + '.' + arr[2]
    // console.log(middleImgPath);
    // 设置给中图和大图
    this.middleImg.src = middleImgPath
    this.bigBox.style.backgroundImage = `url("${bigImgPath}")`
}

var e = new Enlarge('enlarge')
console.log(e);
e.init()
</script>
</html>