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. 运行效果展示