放大镜效果

最新推荐文章于 2024-08-04 16:33:59 发布

谈情不如逗狗...

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量72

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45892570/article/details/120554654

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客介绍了一个交互式的图片放大效果实现，通过HTML、CSS和JavaScript技术，当鼠标悬停在小图上时，显示大图并允许用户通过移动鼠标来查看细节。主要涉及到元素定位、事件监听和动态计算坐标等技术。

摘要由CSDN通过智能技术生成

<!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>
        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>

<body>
    <div class="box" id="box">
        <div class="small" id="small">
            <img src="images/small.jpg" width="350" alt="" />
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="big">
            <img src="images/big.jpg" width="800" alt="" id="img" />
        </div>
    </div>
</body>
<script>
    var box = document.querySelector('#box');
    var smallBox = document.querySelector('#small');
    var bigBox = document.querySelector('#big');
    var mask = document.querySelector('#mask');
    var imgObj = document.querySelector('#img');
    var smallDistanceLeft;
    var bigDistanceLeft;
    var smallDistanceTop;
    var bigDistanceTop;
    box.addEventListener('mouseenter', function () {
        mask.style.display = 'block';
        bigBox.style.display = 'block';
        smallDistanceLeft = smallBox.offsetWidth - mask.offsetWidth;
        bigDistanceLeft = bigBox.offsetWidth - img.offsetWidth;
        smallDistanceTop = smallBox.offsetHeight - mask.offsetHeight;
        bigDistanceTop = bigBox.offsetHeight - img.offsetHeight;
    })
    box.addEventListener('mouseleave', function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    })
    box.addEventListener('mousemove', function (e) {
        var pageX = e.pageX;
        var pageY = e.pageY;
        var bX = this.offsetLeft;
        var bY = this.offsetTop;
        var maskLeft = pageX - bX - mask.offsetWidth / 2;
        var maskTop = pageY - bY - mask.offsetHeight / 2;
        maskLeft = maskLeft < 0 ? 0 : maskLeft;
        maskTop = maskTop < 0 ? 0 : maskTop;
        maskLeft = maskLeft > smallBox.offsetWidth - mask.offsetWidth ? smallBox.offsetWidth - mask
            .offsetWidth : maskLeft;
        maskTop = maskTop > smallBox.offsetHeight - mask.offsetHeight ? smallBox.offsetHeight - mask
            .offsetHeight : maskTop;
        var bigLeft = maskLeft / smallDistanceLeft * bigDistanceLeft;
        var bigTop = maskTop / smallDistanceTop * bigDistanceTop;
        // console.log('maskLeft:',maskLeft);
        // console.log('smallDistanceLeft',smallDistanceLeft);
        // console.log('bigDistanceLeft',bigDistanceLeft);
        mask.style.left = maskLeft + 'px';
        mask.style.top = maskTop + 'px';
        imgObj.style.left = bigLeft + 'px';
        imgObj.style.top = bigTop + 'px';
    })
</script>

</html>

谈情不如逗狗...

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜效果

<!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>D.
复制链接

扫一扫

专栏目录