jquery放大镜

最新推荐文章于 2023-01-14 21:47:59 发布

~一花一世界~

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量92

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42982865/article/details/89605182

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    .box1{
        width: 300px;
        height: 300px;
        margin: 50px 20px 50px 50px;
        float: left;
        position: relative;
    }
    .box1 img{
        width: 100%;
        height: 100%;
    }
    .box2{
        position: relative;
        width: 300px;
        height: 300px;
        overflow: hidden;
        float: left;
        margin-top: 50px;
        display: none;
    }
    .box2 img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .pointer{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-image: url("https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png");
        cursor: move;
        display: none;
    }
    .opcity{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
    }
</style>
<body>
<div class="box1">
    <div class="opcity"></div>
    <img src="https://img.alicdn.com/imgextra/i2/3015214310/TB2utMYp5MnBKNjSZFoXXbOSFXa_!!3015214310.jpg_430x430q90.jpg" alt="">
    <div class="pointer"></div>
</div>
<div class="box2">
    <img src="https://img.alicdn.com/imgextra/i2/3015214310/TB2utMYp5MnBKNjSZFoXXbOSFXa_!!3015214310.jpg_430x430q90.jpg" alt="">
</div>
</body>
</html>
<script>
    $(".box1").mouseover(function () {
        $(".pointer").show();
        $(".box2").show();
    });
    $(".box1").mousemove(function (e) {
        let wx=e.offsetX-50,wy=e.offsetY-50;
        let maxwidth=$(".box1").width()-$(".pointer").width(),maxheight=$(".box1").height()-$(".pointer").height();
        if (wx>=maxwidth){
            wx=maxwidth
        }
        if (wx<0){
            wx=0
        }
        if (wy>=maxheight){
            wy=maxheight
        }
        if (wy<0){
            wy=0
        }
        $(".pointer").css({"left":wx+"px","top":wy+"px"});
        $(".box2 img").css({"width":"900px","height":"900px","left":-wx*3+"px","top":-wy*3+"px"})
    })
    $(".box1").mouseout(function () {
        $(".pointer").hide();
        $(".box2").hide();
    })
</script>

~一花一世界~

关注

0
点赞
踩
0

收藏

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

<html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></...
复制链接

扫一扫