放大镜案例（39）

最新推荐文章于 2022-03-27 15:16:45 发布

向上的二狗

最新推荐文章于 2022-03-27 15:16:45 发布

阅读量94

点赞数

文章标签： css html jquery

本文链接：https://blog.csdn.net/qq_45738592/article/details/120698655

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜案例</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/magnifier.css">
</head>
<body>
<section class="magnifierBox">
    <div class="smallBox">
        <img src="img/1.jpg" alt="">
        <div class="mark"></div>
    </div>
    <div class="bigBox"><img src="img/2.jpg" alt=""></div>
</section>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/magnifier.js"></script>
</body>
</html>

.magnifierBox {
    margin: 20px auto;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.magnifierBox .smallBox, .magnifierBox .bigBox {
    position: relative;
    float: left;
    width: 300px;
    height: 100%;
    overflow: hidden;
}

.magnifierBox .smallBox img {
    display: block;
    width: 100%;
    height: 100%;
}

.magnifierBox .smallBox .mark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100px;
    height: 100px;
    background: #E01D20;
    opacity: 0.3;
    filter: alpha(opacity=30);
    cursor: move; /*鼠标是可移动的图标*/
}

.magnifierBox .bigBox img {
    position: absolute;
    top: 0;
    left: 0;
    width: 900px;
    height: 900px; /*MARK/SMALL-BOX===BIG-BOX:BIG-IMG*/
}

.magnifierBox .smallBox .mark, .magnifierBox .bigBox {
    display: none;
}

/*
 * 1. 鼠标进入和离开SMALL-BOX，控制MARK以及BIG-BOX的显示隐藏
 * 2. 控制MARK在SMALL-BOX中运动，但是不能超过边界
 * 3. 当MARK在SMALL-BOX移动的时候，根据MARK移动的距离，计算出BIG-IMG在BIG-BOX中移动的距离（反向三倍：X/Y轴移动都是三倍，整体九倍）
 */
$(function () {
    var $magnifierBox = $('.magnifierBox'),
        $smallBox = $magnifierBox.find('.smallBox'),
        $mark = $smallBox.find('.mark'),
        $bigBox = $magnifierBox.find('.bigBox'),
        $bigImg = $bigBox.find('img');

    //=>控制MARK和BIG-BOX的显示隐藏
    $smallBox.on('mouseenter', function (ev) {
        $mark.css('display', 'block');
        $bigBox.css('display', 'block');
        computedMark(ev);//=>刚进入到盒子中，也把MARK位置计算出来

    }).on('mouseleave', function () {
        $mark.css('display', 'none');
        $bigBox.css('display', 'none');
    }).on('mousemove', function (ev) {
        //=>JQ中的EV已经是兼容所有浏览器的了（JQ内部处理了），我们只需要按照标准浏览器的属性使用即可
        computedMark(ev);//=>鼠标在盒子中移动随时计算MARK的位置
    });

    //=>鼠标在SMALL-BOX中移动的时候控制MARK跟着移动(计算出MARK的位置即可)
    function computedMark(ev) {
        var offsetObj = $smallBox.offset(),
            curL = ev.pageX - offsetObj.left - $mark.outerWidth() / 2,
            curT = ev.pageY - offsetObj.top - $mark.outerHeight() / 2;
        //->边界判断
        var minL = 0,
            minT = 0,
            maxL = $smallBox.outerWidth() - $mark.outerWidth(),
            maxT = $smallBox.outerHeight() - $mark.outerHeight();
        curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
        curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
        $mark.css({
            top: curT,
            left: curL
        });
        //=>MARK动，则右侧大图朝反向运动（横竖都是3倍）
        $bigImg.css({
            top: -curT * 3,
            left: -curL * 3
        });
    }
});

基于原生实现放大镜

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>珠峰培训</title>
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/magnifier.css">
</head>
<body>
<section class="container clearfix">
    <div class="smallBox">
        <img src="img/1.jpg" alt="">
        <!--<div class="mark"></div>-->
    </div>
    <div class="bigBox">
        <img src="img/2.jpg" alt="">
    </div>
</section>

<script src="js/magnifier.js"></script>
</body>
</html>

.container {
    margin: 20px auto;
    width: 650px;
}

.smallBox {
    position: relative;
    float: left;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.smallBox img {
    display: block;
    width: 100%;
    height: 100%;
}

.smallBox .mark {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 0, .3);
    cursor: move;
}

.bigBox {
    display: none;
    position: relative;
    float: left;
    width: 350px;
    height: 350px;
    overflow: hidden;
}

.bigBox img {
    position: absolute;
    top: 0;
    left: 0;
    /*mark/small-box===big-box/大图*/
    width: 1050px;
    height: 1050px;
}

let smallBox = document.querySelector('.smallBox'),
    bigBox = document.querySelector('.bigBox'),
    bigImg = bigBox.querySelector('img'),
    mark = null;

//=>鼠标划入:创建MARK
smallBox.onmouseenter = function () {
    if (!mark) {
        mark = document.createElement('div');
        mark.className = 'mark';
        this.appendChild(mark);

        bigBox.style.display = 'block';
    }
};

//=>鼠标移动:让MARK也跟着移动
//1.SMALL-BOX的父级参照物是BODY(如果不是BODY，我们就需要基于OFFSET方法获取它距离BODY的偏移了)
//2.鼠标处于MARK盒子中间的位置(随时计算出MARK盒子的TOP/LEFT即可)
//3.做边界判断(MARK不能移动出SMALL-BOX里面)
smallBox.onmousemove = function (ev) {
    if (!mark) return;
    //=>鼠标在盒子中间计算的LEFT/TOP
    let curL = ev.pageX - smallBox.offsetLeft - mark.offsetWidth / 2,
        curT = ev.pageY - smallBox.offsetTop - mark.offsetHeight / 2;
    //=>计算出来的值不能超过边界
    let minL = 0,
        minT = 0,
        maxL = smallBox.offsetWidth - mark.offsetWidth,
        maxT = smallBox.offsetHeight - mark.offsetHeight;
    curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
    curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
    //=>给MARK赋值样式,让其移动到指定的位置
    mark.style.left = curL + 'px';
    mark.style.top = curT + 'px';

    //=>MARK移动多少,BIG-IMG向其相反的方向移动3.5倍
    bigImg.style.left = -curL * 3.5 + 'px';
    bigImg.style.top = -curT * 3.5 + 'px';
};

//=>鼠标离开:移除MARK
smallBox.onmouseleave = function () {
    if (mark) {
        this.removeChild(mark);//=>从页面中移除MARK，但是此时MARK变量还存储者之前的值呢(页面中移除是DOM操作,但是MARK是JS变量,没啥关系)
        mark = null;//=>手动赋值为NULL,代表MARK已经不存在了

        bigBox.style.display = 'none';
    }
};

向上的二狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜案例（39）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>放大镜案例</title> <link rel="stylesheet" href="css/reset.min.css"> <link rel="stylesheet" href="css/magnifier.css"></head><b.
复制链接

扫一扫