jquery.jqzoom.js图片放大镜

我会带着你远行 2022-06-07 02:35 301阅读 0赞

#     #

jqzoom插件实现图片放大镜效果

![191059585676607.jpg][]

1. jquery.jqzoom.js

![复制代码][copycode.gif]

//**************************************************************
    // jQZoom allows you to realize a small magnifier window,close
    // to the image or images on your web page easily.
    //
    // jqZoom version 2.2
    // Author Doc. Ing. Renzi Marco(www.mind-projects.it)
    // First Release on Dec 05 2007
    // i'm looking for a job,pick me up!!!
    // mail: renzi.mrc@gmail.com
    //**************************************************************
    (function ($) {
        $.fn.jqueryzoom = function (options) {
            var settings = {
                xzoom: 200,        //zoomed width default width
                yzoom: 200,        //zoomed div default width
                offset: 10,        //zoomed div default offset
                position: "right",//zoomed div default position,offset position is to the right of the image
                lens: 1, //zooming lens over the image,by default is 1;
                preload: 1
            };
            if (options)
            {
                $.extend(settings, options);
            }
            var noalt = '';
            $(this).hover(function () {
                var imageLeft = $(this).offset().left;
                var imageTop = $(this).offset().top;
                var imageWidth = $(this).children('img').get(0).offsetWidth;
                var imageHeight = $(this).children('img').get(0).offsetHeight;
                noalt = $(this).children("img").attr("alt");
                var bigimage = $(this).children("img").attr("jqimg");
                $(this).children("img").attr("alt", '');
                if ($("div.zoomdiv").get().length == 0)
                {
                    $(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");
                    $(this).append("<div class='jqZoomPup'> </div>");
                }
                if (settings.position == "right")
                {
                    if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width)
                    {
                        leftpos = imageLeft - settings.offset - settings.xzoom;
                    } else
                    {
                        leftpos = imageLeft + imageWidth + settings.offset;
                    }
                } else
                {
                    leftpos = imageLeft - settings.xzoom - settings.offset;
                    if (leftpos < 0)
                    {
                        leftpos = imageLeft + imageWidth + settings.offset;
                    }
                }
                $("div.zoomdiv").css({ top: imageTop, left: leftpos });
                $("div.zoomdiv").width(settings.xzoom);
                $("div.zoomdiv").height(settings.yzoom);
                $("div.zoomdiv").show();
                if (!settings.lens)
                {
                    $(this).css('cursor', 'crosshair');
                }
                $(document.body).mousemove(function (e) {
                    mouse = new MouseEvent(e);
                    /*$("div.jqZoomPup").hide();*/
                    var bigwidth = $(".bigimg").get(0).offsetWidth;
                    var bigheight = $(".bigimg").get(0).offsetHeight;
                    var scaley = 'x';
                    var scalex = 'y';
                    if (isNaN(scalex) | isNaN(scaley))
                    {
                        var scalex = (bigwidth / imageWidth);
                        var scaley = (bigheight / imageHeight);
                        $("div.jqZoomPup").width((settings.xzoom) / scalex);
                        $("div.jqZoomPup").height((settings.yzoom) / scaley);
                        if (settings.lens)
                        {
                            $("div.jqZoomPup").css('visibility', 'visible');
                        }
                    }
                    xpos = mouse.x - $("div.jqZoomPup").width() / 2 - imageLeft;
                    ypos = mouse.y - $("div.jqZoomPup").height() / 2 - imageTop;
                    if (settings.lens)
                    {
                        xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos;
                        ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos;
                    }
                    if (settings.lens)
                    {
                        $("div.jqZoomPup").css({ top: ypos, left: xpos });
                    }
                    scrolly = ypos;
                    $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
                    scrollx = xpos;
                    $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
                });
            }, function () {
                $(this).children("img").attr("alt", noalt);
                $(document.body).unbind("mousemove");
                if (settings.lens)
                {
                    $("div.jqZoomPup").remove();
                }
                $("div.zoomdiv").remove();
            });
            count = 0;
            if (settings.preload)
            {
                $('body').append("<div style='display:none;' class='jqPreload" + count + "'>sdsdssdsd</div>");
                $(this).each(function () {
                    var imagetopreload = $(this).children("img").attr("jqimg");
                    var content = jQuery('div.jqPreload' + count + '').html();
                    jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">');
                });
            }
        }
    })(jQuery);
    function MouseEvent(e) {
        this.x = e.pageX;
        this.y = e.pageY;
    }

![复制代码][copycode.gif]

2. jqzoom.css

![复制代码][copycode.gif]

/*jQzoom*/
    .jqzoom{
         
        border:1px solid #BBB;
        float:left;
        position:relative;
        padding:0px;
        cursor:pointer;
    }
    div.zoomdiv {
         
        z-index:    999;
        position                : absolute;
        top:0px;
        left:0px;
        width                   : 200px;
        height                  : 200px;
        background: #ffffff;
        border:1px solid #CCCCCC;
        display:none;
        text-align: center;
        overflow: hidden;
    }
    div.jqZoomPup {
         
        z-index                 : 999;
        visibility              : hidden;
        position                : absolute;
        top:0px;
        left:0px;
        width                   : 50px;
        height                  : 50px;
        border: 1px solid #aaa;
        background: #ffffff url(../images/zoomlens.gif) 50% top  no-repeat;
        opacity: 0.5;
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        filter: alpha(Opacity=50);
    }

![复制代码][copycode.gif]

3. html代码

![复制代码][copycode.gif]

<!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>
        <title></title>
        <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="jquery.jqzoom.js" type="text/javascript"></script>
        <link href="jqzoom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            /*使用jqzoom*/
            $(function() {
                $(".jqzoom").jqueryzoom({
                    xzoom: 400, //放大图的宽度(默认是 200)
                    yzoom: 400, //放大图的高度(默认是 200)
                    offset: 10, //离原图的距离(默认是 10)
                    position: "right", //放大图的定位(默认是 "right")
                    preload: 1
                });
            });
        </script>
    </head>
    <body>
    <div class="jqzoom">
        <img src="images/shoe1_small.jpg" style="width:300px; height:300px;" alt=""  jqimg="images/shoe1_big.jpg" id="bigImg"/>
    </div>
    </body>
    </html>

![复制代码][copycode.gif]

附件：放大镜图标（zoomlens.gif）

![191316365205062.gif][]

分类:  [Web前端][Web]

[191059585676607.jpg]: /images/20220607/f41453a49b3641c5abbafba68607b5b3.png
[copycode.gif]: /images/20220607/99002328d84947a0834a78fc908a7b9c.png
[191316365205062.gif]: /images/20220607/e1810bcb194c40069b2618ab969d550c.png
[Web]: http://www.cnblogs.com/sydeveloper/category/572252.html