超实用~使用JS实现放大镜效果

最新推荐文章于 2023-11-21 18:38:33 发布

十一分冷静

最新推荐文章于 2023-11-21 18:38:33 发布

阅读量183

点赞数 6

文章标签： css html5 html javascript

本文链接：https://blog.csdn.net/m0_56372325/article/details/120196280

版权

原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮盖层，通过定位遮盖层的位置来定位大图片的相对位置（通过比例计算），需要明确遮盖层的移动方向应该和大图片的移动方向相反。

原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮盖层，通过定位遮盖层的位置来定位大图片的相对位置（通过比例计算），需要明确遮盖层的移动方向应该和大图片的移动方向相反。

style样式

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="css/index.css">-->
    <style>
        img {
            display: block;
        }

        * {
            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;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;

        }

        .mask {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
</head>

HTML

<body>

    <div class="box" id="box">

        <div class="small" id="small">

            <img src="small(1).jpg" width="350" alt="" />

            <div class="mask" id="mask"></div>

        </div>

        <div class="big" id="big">

            <img src="big(1).jpg" width="1800" alt="" id="img" />

        </div>

    </div>

</body>

JS

获取节点绑定事件


<script>

    class Show{
        constructor(){

            //获取节点

            this.maskObj=this.$('#mask');//遮盖层

            this.smallObj=this.$('#small');

            this.bigObj=this.$('#big');//大盒子

            this.boxObj=this.$('#box');//小盒子

            this.bigImg=this.$('#img')

        //给装图片的盒子绑定事件

            this.smallObj.addEventListener('mouseenter',this.enter.bind(this));

            this.smallObj.addEventListener('mouseleave',this.leave.bind(this));

            this.smallObj.addEventListener('mousemove',this.move.bind(this));

        }

鼠标移入事件


//鼠标移入实现对大盒子及小盒子中遮盖层的显示

        enter(){
            this.maskObj.style.display='block';

            this.bigObj.style.display='block';

        }

鼠标移出事件

//鼠标移出实现对大盒子及小盒子中遮盖层的隐藏

        leave(){
            this.maskObj.style.display='none';

            this.bigObj.style.display='none';

        }

鼠标移动事件（关键）

   move(event){
            // 获取鼠标在页面实时位置

            var mousePageX=event.pageX;

            var mousePageY=event.pageY;

            // 获取装图片盒子的位置

            var boxX=this.boxObj.offsetLeft;

            var boxY=this.boxObj.offsetTop;

            // 鼠标在小盒子的实时位置

            var mouseBoxX=mousePageX-boxX-this.maskObj.offsetWidth/2;

            var mouseBoxY=mousePageY-boxY-this.maskObj.offsetHeight/2;

            // console.log(mouseBoxX)

            // 鼠标移动的最大距离=小盒子宽高-遮盖层宽高

            var maxWidth=this.boxObj.offsetWidth-this.maskObj.offsetWidth;

            var maxHeight=this.boxObj.offsetHeight-this.maskObj.offsetHeight;

             //设置遮盖层能够移动的最大高宽，不能超出小盒子的宽高

            if(mouseBoxX<0)mouseBoxX=0;

            if(mouseBoxY<0)mouseBoxY=0;

            if(mouseBoxY>maxHeight)mouseBoxY=maxHeight;

            if(mouseBoxX>maxWidth)mouseBoxX=maxWidth;

            this.maskObj.style.top=mouseBoxY+'px';

            this.maskObj.style.left=mouseBoxX+'px';

            // 大盒子

            // 大盒子的最大移动距离

            var bigMaxWidth=this.bigObj.offsetWidth-this.bigImg.offsetWidth;

            var bigMaxHeight=this.bigObj.offsetHeight-this.bigImg.offsetHeight;

            //通过 比例的计算实现大盒子中大图片位置的确定

            // bigX/bigMaxWidth=mouseBoxX/maxWidth

            var bigX=bigMaxWidth*mouseBoxX/maxWidth;

            var bigY=bigMaxHeight*mouseBoxY/maxHeight;

            this.bigImg.style.top=bigY+'px';

            this.bigImg.style.left=bigX+'px';

        }

获取节点方法

//封装一个用于获取节点的方法

        $(tag){
          return  document.querySelector(tag);

        }

    }

    new Show();//调用

</script>

</html>

十一分冷静

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
超实用~使用JS实现放大镜效果

原理：使用2个div，里面分别放大图片和小图片，在小图片上应该还有一个遮盖层，通过定位遮盖层的位置来定位大图片的相对位置（通过比例计算），需要明确遮盖层的移动方向应该和大图片的移动方向相反。style样式<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!--<link rel=...
复制链接

扫一扫