Jquery 插件图片放大效果(兼容ie 火狐 谷歌 Safari)
safariiefunctiontimerjavascript
效果图:
<!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);