jquery图片放大镜效果制作变焦镜头图片放大实现
整体步骤流程：
1. 前端html实现
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>前端界面jquery实现变焦放大图片细节效果</title> <style type="text/css"> .content{width:960px;margin:0 auto;} .content li{width:450px;height:350px;float:left;list-style:none;} .zoom{display:inline-block;} .zoom:after{content:'';display:block;width:33px;height:33px;position:absolute;top:0;right:0;} .zoom img{display:block;} .zoom img::selection{background-color:transparent;} #image3 img:hover{cursor:url(images/grab.cur), default;} #image3 img:active{cursor:url(images/grabbed.cur), default;} </style> <script type="text/javascript" src='js/jquery.min.js'></script> <script type="text/javascript" src='js/jquery.zoombie.js'></script> <script type="text/javascript"> $(document).ready(function () { $('#image1').zoombie(); $('#image2').zoombie({ on: 'click' }); $('#image3').zoombie({ on: 'grab' }); $('#image4').zoombie({ on: 'toggle' }); }); </script> <script type="text/javascript" language="javascript"> $(function () { $("#img_01").zoombieLens(); $("#img_02").zoombieLens({ Size: 500 }); $("#img_03").zoombieLens({ imageSrc: "images/校园逸夫楼1.jpg" }); $("#img_04").zoombieLens({ borderSize: 15, borderColor: "#06f" }); }); </script> </head> <body> <ul class="content"> <!--<li> <span class='zoom' id='image1'> <img src='images/校园逸夫楼1.jpg' id='img1' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> </span> <pre>$('#image1').zoombie();</pre> <pre>鼠标经过放大细节</pre> </li> <li> <span id='image2' class='zoom'> <img src='images/校园逸夫楼1.jpg' id='img2' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> </span> <pre>$('#image2').zoombie({ on: 'click' });</pre> <pre>鼠标单击放大细节</pre> </li> <li> <span class='zoom' id='image3'> <img src='images/校园逸夫楼1.jpg' id='img3' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> </span> <pre>$('#image3').zoombie({ on: 'grab' });</pre> <pre>鼠标单击放大细节</pre> </li> <li> <span class='zoom' id='image4'> <img src='images/校园逸夫楼1.jpg' id='img4' width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> </span> <pre>$('#image4').zoombie({ on:'toggle' });</pre> <pre>鼠标单击放大细节</pre> </li>--> <li> <img id="img_01" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee' /> <!--<pre>$("#img_01").zoombieLens();</pre>--> <pre>鼠标经过放大细节</pre> </li> <li> <img id="img_02" src="images/校园逸夫楼1.jpg" width='426' height='241'style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> <!--<pre>$("#img_02").zoombieLens({ Size: 2000 });</pre>--> <pre>鼠标经过放大细节</pre> </li> <li> <img id="img_03" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #666666;" alt='Daisy on the Ohoopee'/> <!--<pre>$("#img_03").zoombieLens({ imageSrc: "可爱小刺猬.jpg" });</pre>--> <pre>鼠标经过放大细节</pre> </li> <li> <img id="img_04" src="images/校园逸夫楼1.jpg" width='426' height='241' style="border: 2px solid #00ff21;" alt='Daisy on the Ohoopee' /> <!--<pre>$("#img_04").zoombieLens({ borderSize: 15, borderColor: "#06f" });</pre>--> <pre>鼠标经过放大细节</pre> </li> </ul> </body> </html>
2. JavaScript实现
2.1 js/jquery.zoombie.js
(function ($) { $.fn.zoombieLens = function (options) { var defaults = { Size: 100, borderSize: 4, borderColor: "#888" }; var options = $.extend(defaults, options); var lensType = "background-position: 0px 0px;width: " + String(options.Size) + "px;height: " + String(options.Size) + "px;float: left;display: none;border-radius: " + String(options.Size / 2 + options.borderSize) + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor + ";background-repeat: no-repeat;position: absolute;"; return this.each(function () { obj = $(this); var offset = $(this).offset(); // Creating lens var target = $("<div style='" + lensType + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent()); var targetSize = target.size(); // Calculating actual size of image var imageSrc = options.imageSrc ? options.imageSrc : $(this).attr("src"); var imageTag = "<img style='display:none;' src='" + imageSrc + "' />"; var widthRatio = 0; var heightRatio = 0; $(imageTag).load(function () { widthRatio = $(this).width() / obj.width(); heightRatio = $(this).height() / obj.height(); }).appendTo($(this).parent()); target.css({ backgroundImage: "url('" + imageSrc + "')" }); target.mousemove(setImage); $(this).mousemove(setImage); function setImage(e) { var leftPos = parseInt(e.pageX - offset.left); var topPos = parseInt(e.pageY - offset.top); if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) { target.hide(); } else { target.show(); leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * (-1)); topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * (-1)); target.css({ backgroundPosition: leftPos + 'px ' + topPos + 'px' }); leftPos = String(e.pageX - target.width() / 2); topPos = String(e.pageY - target.height() / 2); target.css({ left: leftPos + 'px', top: topPos + 'px' }); } } }); }; })(jQuery); (function ($) { var defaults = { url: false, callback: false, target: false, duration: 120, on: 'mouseover' // other options: 'grab', 'click', 'toggle' }; $.zoombie = function(target, source, img) { var outerWidth, outerHeight, xRatio, yRatio, offset, position = $(target).css('position'); $(target).css({ position: /(absolute|fixed)/.test() ? position : 'relative', overflow: 'hidden' }); $(img) .addClass('zoomImg') .css({ position: 'absolute', top: 0, left: 0, opacity: 0, width: img.width, height: img.height, border: 'none', maxWidth: 'none' }) .appendTo(target); return { init: function() { outerWidth = $(target).outerWidth(); outerHeight = $(target).outerHeight(); xRatio = (img.width - outerWidth) / $(source).outerWidth(); yRatio = (img.height - outerHeight) / $(source).outerHeight(); offset = $(source).offset(); }, move: function (e) { var left = (e.pageX - offset.left), top = (e.pageY - offset.top); top = Math.max(Math.min(top, outerHeight), 0); left = Math.max(Math.min(left, outerWidth), 0); img.style.left = (left * -xRatio) + 'px'; img.style.top = (top * -yRatio) + 'px'; } }; }; $.fn.zoombie = function (options) { return this.each(function () { var settings = $.extend({}, defaults, options || {}), //target will display the zoomed iamge target = settings.target || this, //source will provide zoom location info (thumbnail) source = this, img = new Image(), $img = $(img), mousemove = 'mousemove', clicked = false; // If a url wasn't specified, look for an image element. if (!settings.url) { settings.url = $(source).find('img').attr('src'); if (!settings.url) { return; } } img.onload = function () { var zoombie = $.zoombie(target, source, img); function start(e) { zoombie.init(); zoombie.move(e); // Skip the fade-in for IE8 and lower since it chokes on fading-in // and changing position based on mousemovement at the same time. $img.stop() .fadeTo($.support.opacity ? settings.duration : 0, 1); } function stop() { $img.stop() .fadeTo(settings.duration, 0); } if (settings.on === 'grab') { $(source).mousedown( function (e) { $(document).one('mouseup', function () { stop(); $(document).unbind(mousemove, zoombie.move); } ); start(e); $(document)[mousemove](zoombie.move); e.preventDefault(); } ); } else if (settings.on === 'click') { $(source).click( function (e) { if (clicked) { // bubble the event up to the document to trigger the unbind. return; } else { clicked = true; start(e); $(document)[mousemove](zoombie.move); $(document).one('click', function () { stop(); clicked = false; $(document).unbind(mousemove, zoombie.move); } ); return false; } } ); } else if (settings.on === 'toggle') { $(source).click( function (e) { if (clicked) { stop(); } else { start(e); } clicked = !clicked; } ); } else { zoombie.init(); $(source).hover( start, stop )[mousemove](zoombie.move); } if ($.isFunction(settings.callback)) { settings.callback.call(img); } }; img.src = settings.url; }); }; $.fn.zoombie.defaults = defaults; }(window.jQuery));
2.2 js/jquery.min.js 经典jquery库即可
3. 资源文件
3.1 images
文件名：校园逸夫楼1.jpg
3.2 其他资源文件
grab.cur 和 grabbed.cur
4. 运行效果展示
