如何用js写放大镜

最新推荐文章于 2022-09-12 16:29:26 发布

minimore_zhd

最新推荐文章于 2022-09-12 16:29:26 发布

阅读量388

点赞数

文章标签： js css html javascript

本文链接：https://blog.csdn.net/minimorezhd/article/details/111400319

版权

今天带大家来学习学习如何使用js来写一个放大镜，放大镜的代码其实不难，难在对于结构的理解。

结构的理解

这点大家可以参考一下，某宝某东等等购物网站，其中的商品都会放上去就会显示一张大照片。
一般情况下都是
左边一个小盒子，里面一张照片和一个遮盖层这里面的照片要比盒子的大小小
右边一个大盒子，里面放一张大照片，这个大照片的长宽要比和盒子要大

结构搭建

大家理解了结构的原理的话，搭建起来还是很简单的

js的书写

js的最主要的就是理解最后一步，求大图片在大盒子里面能移动的最大距离

注释我都写在代码里面了大家仔细阅读代码即可

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }
        
        .big img {
            position: absolute;
            width: 800px;
        }
        
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }
        
        .small {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="small" id="s_box">
            <img src="images/small.jpg" width="350" alt="" />
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="b_box">
            <img src="images/big.jpg" alt="" id="bigimg" />
        </div>
    </div>
    <script>
        //封装函数 直接写zhd即可调用
        function zhd(id) {
            return document.getElementById(id)
        }
        //给小盒子添加事件 使其进入时显示大照片和遮盖层
        zhd('s_box').onmouseenter = function() {
            zhd('mask').style.display = 'block'
            zhd('b_box').style.display = 'block'
        }
        zhd('s_box').onmouseleave = function() {
            zhd('mask').style.display = 'none'
            zhd('b_box').style.display = 'none'
        }

        //让遮盖层跟着鼠标的移动一起移动
        zhd('s_box').onmousemove = function(e) {

            //获取鼠标在盒子中的位置，就是遮盖层的坐标
            var x = e.pageX - zhd('s_box').offsetLeft
            var y = e.pageY - zhd('s_box').offsetTop

            //使鼠标显示在遮盖层的中间
            x -= zhd('mask').offsetWidth
            y -= zhd('mask').offsetHeight

            //如果鼠标往左边的方向离开盒子则把最小值赋值给盒子
            x = x < 0 ? 0 : x
            y = y < 0 ? 0 : y

            //如果鼠标往右边的方向离开盒子则把最大值赋值给盒子
            x = x > zhd('box').offsetWidth - zhd('mask').offsetWidth ? zhd('box').offsetWidth - zhd('mask').offsetWidth : x
            y = y > zhd('box').offsetHeight - zhd('mask').offsetHeight ? zhd('box').offsetHeight - zhd('mask').offsetHeight : y

            //把距离赋值给position实现移动  记得加"px"
            zhd('mask').style.left = x + 'px'
            zhd('mask').style.top = y + 'px'

            //当遮盖层移动的时候，让大图片移动
            //遮盖层能移动的最大距离
            var maskMax = zhd('box').offsetWidth - zhd('mask').offsetWidth

            // 大图片最大能够移动的距离
            var bigImg = zhd('bigimg').offsetWidth - zhd('b_box').offsetWidth

            //x / maskMax = bigMax / bigImg
            bigMaxX = x / maskMax * bigImg
            bigMaxY = y / maskMax * bigImg

            //把距离赋值给position实现移动  记得加"px"
            zhd('bigimg').style.left = -bigMaxX + 'px'
            zhd('bigimg').style.top = -bigMaxY + 'px'
        }
    </script>
</body>

</html>