Jquery 插件图片放大效果(兼容ie 火狐谷歌 Safari)

效果图：

<!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{ 200px;height: 200px;overflow: hidden;}
        #showbigpicbox{position: absolute;overflow: hidden;background-repeat: no-repeat;display: none;border: 1px solid #ccc;background-color: #fff; 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>

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


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


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


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


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


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


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

Jquery 插件图片放大效果(兼容ie 火狐 谷歌 Safari)

Jquery 插件图片放大效果(兼容ie 火狐谷歌 Safari)