一个简单的dom案例----放大镜

最新推荐文章于 2023-04-27 19:13:37 发布

HXR1984

最新推荐文章于 2023-04-27 19:13:37 发布

阅读量256

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/HXR1984/article/details/125037062

版权

用HTML5+css+js完成一个简单的dom案例。

前言

制作一个页面中的小部件，实现主图片的放大功能

一、完成页面的基本内容

代码如下（示例）：

<body>
    <div class="shop">
        <div class="slider"></div>
    </div>
    <div class="mirror">
        <img src="img/dog.jpeg" alt="">
    </div>
</body>

二、完善css样式

代码如下（示例）：

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .shop {
            float: left;
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            background-image: url(img/dog.jpeg);
            background-size: 100% 100%;
            position: relative;
            margin-left: 200px;
        }
        .slider {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: cyan;
            opacity: .5;
            display: none;
        }
        .mirror {
            width: 400px;
            height: 400px;
            border: 1px solid gray;
            float: left;
            overflow: hidden;
            position: relative;
            display: none;
        }
        .mirror img {
            width: 800px;
            height: 800px;
            position: absolute;
        }
    </style>

三、实现js操作

1.要先把jquery导入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.js

代码如下（示例）：

<script>
    $(".shop").mouseenter(function(){
        // 鼠标移入事件
        $(".slider").css('display','block');
        $(".mirror").css('display','block');
    })

    $(".shop").mouseleave(function(){
        // 鼠标移出事件
        $(".slider").css('display','none');
        $(".mirror").css('display','none');
    })

    $(".shop").mousemove(function(e){
        // 鼠标移动事件
        var x = e.pageX - this.offsetLeft - 75;
        var y = e.pageY -this.offsetTop - 75;

        // 限制边界
        x = (x<0) ? 0 : x;
        x = (x>150) ? 150 : x;
        y = (y<0) ? 0 : y;
        y = (y>150) ? 150 : y;

        $(".slider").css('left', x);
        $(".slider").css('top', y);

        // 等比例移动大图
        var l1 = $(".slider").position().left;
        var t1 = $(".slider").position().top;
        var w1 = 300;
        var w2 = 800;
        var l2 = l1 * w2 / w1 * -1;
        var t2 = t1 * w2 / w1 * -1;
        $("img").css('left',l2);
        $("img").css('top',t2);
    })
</script>

最终效果如图：
放大镜最终效果图

总结

这样一个小小的页面部件—放大镜就完成了，平时可以用在我们的商城页面等，同样样式和功能等都可以进一步改善，这里只是简单的实现，希望对大家有帮助！

HXR1984

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单的dom案例----放大镜

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代.
复制链接

扫一扫