jq案例---放大镜

最新推荐文章于 2021-10-12 21:35:05 发布

weixin_48211419

最新推荐文章于 2021-10-12 21:35:05 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/weixin_48211419/article/details/112794628

版权

文件列表

在这里插入图片描述

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css">
    <script src="../../jquery/jquery-3.5.1.js"></script>
</head>
<body>
    <div class="a">
        <img src="imgs/1.jpg" alt="">
        <div></div>
    </div>
    <div class="b">
        <img src="imgs/1.jpg" alt="">
    </div>
</body>
<script src="1.js"></script>
</html>

1.css

*{
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    flex-direction: row;
}
.a,.b{
    width: 200px;
    height: 200px;
    margin: 10px;
}
.a{
    position: relative;
    border: 3px solid red;
}
.a>img{
    width: 100%;
    height: 100%;
}
.a>div{
    width: 100px;
    height: 100px;
    background-color: #000;
    opacity: 0.5;
    position: absolute;
    top:0;
    left: 0;
}
.b{
    border: 3px solid;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.b>img{
    position: relative;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
}

1.js

$('.a').mousemove(function(e){
    // 计算 两张图片 宽和高 的放大比例
    var biliWidth = $('.b>img').width() / $('.a>img').width()
    var biliHeight = $('.b>img').height() / $('.a>img').height()
    // 计算鼠标到 .a 的 top和left 的值
    var x = e.clientX - $('.a>img').offset().left
    var y = e.clientY - $('.a>img').offset().top
    // 计算 .a>div 到 .a 的 top和left
    var top = $('.a>div').position().top
    var left = $('.a>div').position().left
    // 设置最大值
    var maxX = $('.a').width() - ( $('.a>div').width() / 2 )
    var maxY = $('.a').height() - ( $('.a>div').height() / 2 )
    // 设置最小值
    var minX = $('.a>div').width() / 2
    var minY = $('.a>div').height() / 2
    // 限定活动范围并
    if (x>=minX && x<=maxX && y>=minY && y<=maxY) {
        // 计算 .a>div 的偏移距离
        top = y - ( $('.a>div').height() / 2 )
        left = x - ( $('.a>div').width() / 2 )
        $('.a>div').css('top', top)
        $('.a>div').css('left', left)
        // 计算 .b>img 的偏移距离
        var bx = '-' + (left * biliWidth) + 'px'
        var by = '-' + (top * biliHeight) + 'px'
        $('.b>img').css('top', by)
        $('.b>img').css('left', bx)
    }
})

1.jpg

在这里插入图片描述

效果

在这里插入图片描述

weixin_48211419

关注

0
点赞
踩
0

收藏

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

目录文件列表1.html1.css1.js1.jpg效果文件列表1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫