實現原理：
這里用到了兩張圖片，一張小圖，一張大圖。將大圖設置為放大鏡的背景圖片，當鼠標在小圖上移動時，同時控制背景大圖在放大鏡中的位置。兩張圖片大小最好是等比例的，這樣才能達到最佳效果。當沒有大圖時，則默認為小圖本身，這時由于兩張圖片大小一樣，因此放大鏡效果不明顯，就跟沒放大是一樣的。
此插件用到了html5，css3的一些屬性，ie8及以下版本不兼容，放大鏡是方形的。
運行效果截圖如下：
具體代碼如下：
(function () { $.fn.Magnifier = function (options) { //默認參數設置 var settings = { diameter: 150, //放大鏡的直徑大小 borderWidth: 2, //放大鏡邊框大小 borderColor: "white", //放大鏡邊框顏色 backgroundImg: "../img/111.jpg" //放大鏡內的圖片（即大圖） }; //合并參數 if (options) $.extend(settings, options); //鏈式原則 return this.each(function () { //存儲當前對象 var root = $(this); //當前對象寬高 var WRoot = root.width(); var HRoot = root.height(); //偏移量 left 和 top var offset = root.offset(); //放大鏡樣式 var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;"; style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;"; style += "width: " + String(settings.diameter) + "px;height: " + String(settings.diameter) + "px;"; style += "border-radius: " + String(settings.diameter / 2 + settings.borderWidth) + "px;"; style += "border: " + String(settings.borderWidth) + "px solid " + settings.borderColor + ";"; //創建放大鏡 var magnifier = $("<div style='" + style + "'></div>").appendTo(root.parent()); //圖片（當沒有大圖時，為小圖本身） var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src"); //將圖片放入放大鏡內 magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" }); //縮放比例 var WRatio = 0; //寬度 var HRatio = 0; //高度 //圖片加載完，計算縮放比例 //由于圖片原本不在DOM文檔里，因此頁面加載時不會觸發load事件，因此要通過執行appendTo來觸發load事件 $("<img style='display:none;' src='" + backgroundImg + "' />").load(function () { WRatio = $(this).width() / WRoot; HRatio = $(this).height() / HRoot; }).appendTo(root.parent()); //放大鏡及其背景圖片位置控制 function Position(e) { var LPos = parseInt(e.pageX - offset.left); var TPos = parseInt(e.pageY - offset.top); //判斷鼠標是否在圖片上 if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) { magnifier.hide(); //不在隱藏放大鏡 } else { magnifier.show(); //反之顯示放大鏡 //控制放大鏡內背景圖片的位置 （settings.diameter / 2）半徑 LPos = String(((e.pageX - offset.left) * WRatio - settings.diameter / 2) * (-1)); TPos = String(((e.pageY - offset.top) * HRatio - settings.diameter / 2) * (-1)); magnifier.css({ backgroundPosition: LPos + 'px ' + TPos + 'px' }); //控制放大鏡本身位置 LPos = String(e.pageX - settings.diameter / 2); TPos = String(e.pageY - settings.diameter / 2); magnifier.css({ left: LPos + 'px', top: TPos + 'px' }); } } //放大鏡 magnifier.mousemove(Position); //當前對象 root.mousemove(Position); }); };})();實例DEMO如下：
<!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3+jQuery圖像放大鏡效果</title> <style type="text/css"> body { background-color: Black; } .box { width: 700px; margin: 50px auto; } </style></head><body> <div class="box"> <!--小圖--> <img alt="" id="img_02" src="../img/222.gif" width="700" height="500" /> </div> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script> <script type="text/javascript"> $("#img_02").Magnifier(); </script></body></html>關于jquery實現圖片放大鏡功能的內容就介紹到這里，希望大家仔細研究，學以致用。
新聞熱點
疑難解答
