效果图:
<!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);