HTML+JS+CSS实现放大镜功能

功能概要

可放大图片并查看
显示效果

实现思路

主要分为图片展示盒子、遮挡层、大图显示盒子
首先需要完成遮挡层随着鼠标的移动而移动，且遮挡层盒子移动坐标计算方式为：鼠标当前坐标减去盒子的offsetWidth，即鼠标在大盒子中的位置
考虑大图随着遮挡层的移动而移动，由于遮挡层的移动距离与大图的移动距离不是对等关系，因此为了按照一定比列进行移动并显示，大图的计算方式应该如下：

大图的移动距离 / 大图最大移动距离 = 遮挡层的移动距离 / 遮挡层最大移动距离
大图移动距离 =  大图最大移动距离 * 遮挡层的移动距离 / 遮挡层最大移动距离

涉及知识点

元素偏移量offset系列
鼠标事件，mouseover，mouseout，mousemove
鼠标对象属性：e.pageX/e.pageY，（获取鼠标触发事件处相对于文档页面的X/Y坐标，ie9以上支持）

注意点

案例中设计的box盒子长度并没有考虑正方形，因此需要每次都计算x以及y的值，方便起见可以将盒子长宽一致，方便计算。

实现代码

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practice1</title>
    <link href="../css/practive1.css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/practice1.js"></script>
</head>

<body>
<div class="box">
    <img class="img" src="../imgs/pig.jpg"alt="图片"/>
    <div class="mask"></div>
    <div class="rightbox">
        <img class="bigImg" src="../imgs/pig.jpg" alt="图片" height="100%" />
    </div>
</div>
</body>

</html>

css

.box {
    position: relative;
    text-align: center;
    margin-left: 100px;
    width: 400px;
    height: 600px;
    border: 1px solid #c6ccc7;
}

.img {
    margin-top: 80px;
    width: 200px;
}

.mask {
    display: none;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 999;
    width: 300px;
    height: 300px;
    background-color: #e8ba67;
    opacity: .4;
    cursor: move;
}

.rightbox {
    display: none;
    position: absolute;
    left: 420px;
    top: 0%;
    width: 600px;
    height: 100%;
    border: 1px solid #c6ccc7;
    overflow: hidden;
}

.bigImg {
    position: absolute;
    left: 0;
    top: 0;
}

window.addEventListener('load',function () {
    var img = document.querySelector('.img');
    var mask = document.querySelector('.mask');
    var rightbox = document.querySelector('.rightbox');
    var box = document.querySelector('.box');
    // 鼠标经过 显示遮挡层和大图
    box.addEventListener('mouseover',function () {
        console.log(1);
        mask.style.display = 'block';
        rightbox.style.display = 'block';
    })
    // 鼠标离开 隐藏遮挡层和大图
    box.addEventListener('mouseout',function () {
        mask.style.display = 'none';
        rightbox.style.display = 'none';
    })

    // 盒子跟着鼠标移动
    box.addEventListener('mousemove',function (e) {
        // 遮挡层移动距离
        var x = e.pageX - this.offsetLeft - mask.offsetWidth / 2;
        var y = e.pageY - this.offsetTop - mask.offsetWidth / 2;
        // 遮挡层 x 方向 得最大移动距离
        var maskMax = this.offsetWidth - mask.offsetWidth;
        // 如果遮挡层x方向移动距离小于0 也即 遮挡层最左边离开大盒子 需要让其处于以盒子为坐标的0 处
        if (x <= 0) {
            x = 0;
        } else if (x >= maskMax) {
            // 遮挡层移动距离大于 最大移动距离 也即 遮挡层最右边离开大盒子box最右边 需要让其等于最大移动距离
            x = maskMax;
        }

        if (y <= 0) {
            y = 0;
        } else if (y >= this.offsetHeight - mask.offsetHeight) {
            y = this.offsetHeight - mask.offsetHeight;
        }
        // 设置遮挡层相对于大盒子的位置
        mask.style.left = x  + 'px';
        mask.style.top = y  + 'px';

      // 大图的显示 大图的移动距离 / 大图最大移动距离 = 遮挡层的移动距离 / 遮挡层最大移动距离
        var bigImg = document.querySelector('.bigImg');
        var bigMax = rightbox.offsetWidth - bigImg.offsetWidth;
        // 分别设置大图移动距离的x y
        var big_x = x * maskMax / bigMax;
        var big_y = y * (this.offsetHeight - mask.offsetHeight) / bigMax;
        bigImg.style.left = -big_x + 'px';
        bigImg.style.top = -big_y + 'px';

    })
})

HTML+JS+CSS实现放大镜功能

功能概要

实现思路

涉及知识点

注意点

实现代码

猜你喜欢