放大镜

最新推荐文章于 2022-09-01 09:21:26 发布

十友九

最新推荐文章于 2022-09-01 09:21:26 发布

阅读量58

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43778556/article/details/116789801

版权

jQuery 专栏收录该内容

10 篇文章 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>Document</title>
    <style>
        #small{
            width: 250px;
            height: 365px;
            border: 1px solid black;
            position: absolute;
            left: 100px;
            top: 100px;
        }
        #small img{
            width: 100%;
            height: 100%;
        }
        #big img{
            width: 1000px;
            height: 1460px;
            position: absolute;
        }
        #big{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: absolute;
            left: 400px;
            top: 100px;
            overflow: hidden;
            display: none;
        }
        #mark{
            width: 100px;
            height: 100px;
            background-color: white;
            opacity: 0.5;
            filter: alpha(opacity=50);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div id="small">
        <img src="../images/01.jfif" alt="">
        <div id="mark"></div>
    </div>
    <div id="big">
        <img src="../images/01.jfif" alt="">
    </div>
    <script src="../jquery/jquery.min.js"></script>
    <script>
        $(function(){
            $('#small')
            .mouseenter(function(){
                $('#mark,#big').show()
            })
            .mouseleave(function(){
                $('#mark,#big').hide()
            })
            .mousemove(function(ev){
                var l=ev.pageX-$(this).offset().left-50
                var t=ev.pageY-$(this).offset().top-50
                if(l<=0){
                    l=0
                }
                if(l>=150){
                    l=150
                }
                if(t<=0){
                    t=0
                }
                if(t>=265){
                    t=265
                }
                // 改变遮罩层的位置
                $('#mark').css({
                    left:l,
                    top:t
                })
                // 同时放大图片的位置，四倍于遮罩层的位置，注意方向相反
                $('#big img').css({
                    left:-4 * l,
                    top:-4 * t
                })
            })
        })
    </script>
</body>
</html>

十友九

关注

0
点赞
踩
0

收藏

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210514141031389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc3ODU1Ng==,size_16,color_FFFFFF,t_70)<!DOCTYPE html><html lang="en"
复制链接

扫一扫