【Web开发】jquery图片放大镜效果制作变焦镜头图片放大

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 lensvar target = $("<div style='" + lensType + "' class='" + options.lensCss + "'>&nbsp;</div>").appendTo($(this).parent());var targetSize = target.size();// Calculating actual size of imagevar 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 () {varsettings = $.extend({}, defaults, options || {}),//target will display the zoomed iamgetarget = 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));