Jquery 插件图片放大效果(兼容ie 火狐谷歌 Safari)_火狐可以放大图片的插件-优快云博客

本文介绍了一种使用JQUERY实现图片放大镜效果的方法。通过鼠标悬停在小图上，可以在页面中显示一个带有放大的图片预览框，随着鼠标移动而变化位置，实现局部放大的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery ZoomImg </title>
    <style type="text/css">
        #showpicBox{width: 200px;height: 200px;overflow: hidden;}
        #showbigpicbox{position: absolute;overflow: hidden;background-repeat: no-repeat;display: none;border: 1px solid #ccc;background-color: #fff;width: 300px;}
    </style>
</head>
<body>
    <div id="showpicBox">
        <img src="2011111614473078125001746.jpg" width="200px" height="200px">
    </div>
    <div id="showbigpicbox">
    </div>
    <script type="text/javascript" language="javascript" src="jquery.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.Zoom.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#showpicBox").Zoom({
                renderTo: "#showbigpicbox",
                ZoomImgId: "ImgZoom"
            });
        });
    </script>
</body>
</html>

/*
*
*  JQUERY 放大镜插件
*  Date:2012-07-10
*  Create      :  Kenhuang
*  [renderTo]  :  [显示层id]
*  [ZoomImgId] :  [显示层里的IMGId]
*/
(function ($) {
    $.fn.Zoom = function (setting) {
        var defSetting = {
            renderTo: "#showbigpicbox",
            ZoomImgId: "ImgZoom"
        };
        setting = $.extend(defSetting, setting);
        if (setting && setting.renderTo) {
            if (typeof (setting.renderTo) == "string") {
                setting.renderTo = $(setting.renderTo);
            }
        } else return;


        var _img_org_ = this.children("img");
        _img_org_.css("cursor", "pointer");


        var _w = _h = move_x = move_y = Enlarge_w = Enlarge_h = 0, _left, _top, val_w, val_h, timer, imgZoomId;


        _left = this.offset().left;
        _top = this.offset().top;


        setting.renderTo.css({ left:_img_org_.width()+20, top: _top, height: _img_org_.height() + 100, width: _img_org_.width() + 100 });


        if (this.offsetParent()) {
            _left += this.offsetParent().offset().left;
            _top += this.offsetParent().offset().top;
        }
        val_w = (setting.renderTo.width() / 2);
        val_h = (setting.renderTo.height() / 2);


        _img_org_.mouseover(function () {
            setting.renderTo.html('<img src="' + _img_org_.attr("src") + '" style="position:absolute;" id="' + setting.ZoomImgId + '" />');
            imgZoomId = $("#" + setting.ZoomImgId);
            setting.renderTo.show();
            timer = setInterval(function () {
                Enlarge_w = setting.renderTo.width() - imgZoomId.width();
                Enlarge_h = setting.renderTo.height() - imgZoomId.height();
                _w = imgZoomId.width() / _img_org_.width();
                _h = imgZoomId.height() / _img_org_.height();
                if (_w > 0) {
                    clearInterval(timer);
                }
            }, 100);
        });
        _img_org_.mouseout(function () {
            clearInterval(timer);
            setting.renderTo.hide();
        });
        _img_org_.mousemove(function (e) {
            var clientX = e.clientX + document.body.scrollLeft || e.clientX + document.documentElement.scrollLeft;
            var clientY = e.clientY + document.body.scrollTop || e.clientY + document.documentElement.scrollTop;
            move_x = 0 - Math.round((clientX - _left) * _w - val_w);
            if (move_x < Enlarge_w) move_x = Enlarge_w; else if (move_x > 0) move_x = 0;
            move_y = 0 - Math.round((clientY - _top) * _h - val_h);
            if (move_y < Enlarge_h) move_y = Enlarge_h; else if (move_y > 0) move_y = 0;
            $(imgZoomId).css({ "left": move_x + "px ", "top": move_y + "px" });
        });
    }
})(jQuery);