Javascript

js 放大镜案例

本文主要是介绍js 放大镜案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

分析和解释都在代码行上

在这里插入图片描述

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            margin-left: 100px;
            height: 1000px;
        }

        .box_left {
            position: relative;
            width: 300px;
        }

        .box_left>img {
            width: 300px;
        }

        .box_right {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 400px;
            height: 600px;
            border: 1px solid #333;
            overflow: hidden;
        }

        .box_right>img {
            position: absolute;
            left: 0;
            top: 0;
            /* width: 600px; */
            /* width: 300px; */
        }

        .meak {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: yellow;
            opacity: .5;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_left">
            <img src="./imgaes/1_poster.4aa4c624.jpg" alt="">
            <div class="meak"></div>
        </div>
        <div class="box_right">
            <img id="banimg" src="./imgaes/1_poster.4aa4c624.jpg" alt="">
        </div>
    </div>
    <script>
        // 案例分析
        // 鼠标移入时 放大镜显示（黄色盒子 和 放大的图显示
        // 因 放大镜 定位在了 产品图的上面 他的 lef 和 top 作用于他的父盒子
        // 我们需要计算出 鼠标在盒子内的 坐标 然后把坐标 给 放大镜 的 left 和 top
        // 我们需要让 放大镜 在产品图 盒子里进行移动 并显示 和隐藏
        // 大图分析案例在下面对应的代码行

        // 先获取属性
        var box_left = document.querySelector('.box_left')
        var meak = document.querySelector('.meak')
        var box_right = document.querySelector('.box_right')
        var banimg = document.querySelector('#banimg')
        
        // 注册事件 鼠标移入事件
        box_left.addEventListener('mouseover', function () {
            meak.style.display = 'block'
            box_right.style.display = 'block'
        })

        // 注册事件 鼠标移动事件
        box_left.addEventListener('mousemove', function (e) {
            // 获取鼠标在盒子内的坐标
            var x = e.pageX - this.offsetLeft
            var y = e.pageY - this.offsetTop

            // 让放大镜盒子 自身向 x 和 y 方向移动自身宽和高的一半 从而得到盒子的移动距离
            var meakx = x - meak.offsetWidth / 2
            var meaky = y - meak.offsetHeight / 2

            // 这里计算出 放大镜在这个 盒子移动的极限距离 （也就是放大镜不能移动出这个盒子）
            // 用 产品图的 宽和高 减去 盒子的宽和高 就可以得到 盒子的 left 和 top 的最大值
            var widthX = this.offsetWidth - meak.offsetWidth
            var heightY = this.offsetHeight - meak.offsetHeight
            // 然后用 if 来判断 
            // 当盒子的 x 小于等于0 就让 盒子的 x 值为 0
            // 当盒子的 y 大于等于的 left 的极限值 就让 y = left 
            if (meakx <= 0) {
                meakx = 0
            } else if (meakx >= widthX) {
                meakx = widthX
            }
            if (meaky <= 0) {
                meaky = 0
            } else if (meaky >= heightY) {
                meaky = heightY
            }
            meak.style.left = meakx + 'px'
            meak.style.top = meaky + 'px'

            // 现在我们要让大图也跟着移动

            // 我们可以利用 产品图与大盒子的比例来判断
            //   放大镜的移动距离          大盒子的移动距离
            // ------------------   ==  ------------------ 
            // 放大镜的极限移动距离       大盒子的极限移动距离

            // 现在我们已知的条件有 
            // 放大镜的移动距离、放大镜的极限移动距离、大盒子的极限移动距离

            // 所以我们可以推算出 
            // 大盒子的移动移动距离 = 放大镜的移动距离 * 大盒子的极限移动距离 / 放大镜的极限移动距离

            var maximgX = box_right.offsetWidth - banimg.offsetWidth // 大盒子的极限距离 X
            var maxX = meakx * maximgX / widthX // 大盒子的移动移动距离 X
            var maximgY = box_right.offsetHeight - banimg.offsetHeight // 大盒子的极限距离 Y
            var maxY = meaky * maximgY / heightY // 大盒子的移动移动距离 Y

            // 这里说明一下 大图在移动的时候是与放大镜反方向移动的 所以移动的值为负值 
            // 我的产品图宽为 300 所以给大图设置了 600 的宽 (当然你不设置也没有问题,但前提得是你的大图的宽高一定要大于产品图,如果你的大图 宽高小于或等于了 产品图 那么在 maxX 和 maxY 的面膜要加 - ，将 left 和 top 变成负值)
            banimg.style.left = maxX + 'px'
            banimg.style.top = maxY + 'px'
        })

        // 注册事件 移出事件
        box_left.addEventListener('mouseout', function () {
            meak.style.display = 'none'
            box_right.style.display = 'none'
        })
    </script>
</body>

</html>
这篇关于js 放大镜案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航