图片放大镜

最新推荐文章于 2025-08-09 13:28:03 发布
原创最新推荐文章于 2025-08-09 13:28:03 发布 · 263 阅读
0 ·
CC 4.0 BY-SA版权
前端专栏收录该内容
17 篇文章
订阅专栏
效果

所需图片

pic为同一张图
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jq图片放大镜</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .magnify {
            width: 550px;
            margin: 80px auto;
            position: relative;
        }
        .large {
            width: 180px;
            height: 180px;
            position: absolute;
            border-radius: 100%;
            /*使用多重阴影，来实现玻璃的效果 */
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 7px 7px rgba(0, 0, 0, 0.3), inset 0 0 40px 2px rgba(0, 0, 0, 0.3);
            cursor: crosshair;
            display: none;
            overflow: hidden;
        }
        .large_pic {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
        }
        .large_pic img {
            display: block;
            width: 1595px;
            height: auto;
        }
        .small {
            display: block;
            width: 550px;
        }
    </style>

</head>
<body>
<div class='magnify'>
    <div class='large'>
        <div class="large_pic">
            <img src='pic.jpg'>
        </div>
    </div>
    <img src='pic.jpg' class='small'>
</div>
<script type="text/javascript" src='jquery-1.7.2.min.js'></script>
<script type="text/javascript">
        $(document).ready(function () {
            var native_width;
            var native_height;
            $('.large_pic img').load(function () {
                //获取图片本身宽高
                var img_obj = new Image();
                img_obj.src = $(this).attr('src');
                //适应不同的图片的大小
                var ratio = 1595 / img_obj.width;
                native_width = img_obj.width * ratio;
                native_height = img_obj.height * ratio;
                $('.magnify').mousemove(function (e) {
                    // 获得鼠标X轴和Y轴的坐标
                    //  先获得magnify相对与document的定位position
                    var magnify_offset = $(this).offset();
                    // 用鼠标相对与文档的位置减去鼠标相对于magnify这个人容器的位置，得到鼠标的位置
                    var mouse_x = e.pageX - magnify_offset.left;
                    var mouse_y = e.pageY - magnify_offset.top;
                    //放大镜的隐藏与显示、
                    if (mouse_x > 0 && mouse_y > 0 && mouse_x < $(this).width() && mouse_y < $(this).height()) {
                        $('.large').fadeIn(100);
                    } else {
                        $('.large').fadeOut(100);
                    }
                    if ($('.large').is(':visible')) {
                        // 放大镜图片背景的定位是根据鼠标在小图片上改变的位置来改变的、
                        // 先得到放大的比例，定位这个放大镜里背景图片的定位
                        //var ratio_x = mouse_x/$('.small').width();//得到的是缩放的比例
                        //var large_x = ratio_x*native_width;
                        // 鼠标位置在放大镜的中间位置显示、
                        //large_x = large_x - $('.large').width()/2;
                        // 因为背景图片的定位、这里需要转化为负值、
                        //large_x = large_x*-1;
                        // 整合步骤
                        var rx = Math.round(mouse_x / $('.small').width() * native_width - $('.large').width() / 2) * -1;
                        var ry = Math.round(mouse_y / $('.small').height() * native_height - $('.large').height() / 2) * -1;
                        // 放大镜跟随鼠标的效果
                        // 放大镜移动的位置 相对于文档的位置 减去 放大镜相对于放大这个层的offset的位置、
                        // 再减去放大镜宽高的一半、保证放大镜的中心跟随鼠标
                        var gx = mouse_x - $('.large').width() / 2;
                        var gy = mouse_y - $('.large').height() / 2;
                        $('.large').css({
                            'left': gx,
                            'top': gy
                        });
                        $('.large_pic').css({
                            'left': rx,
                            'top': ry
                        })
                    }
                })
            })
        })
    </script>
</body>
</html>