JS图片放大扩展,按钮开关放大镜

发布网友发布时间：2022-04-23 02:18

共1个回答

热心网友时间：2022-05-13 07:19

copy运行我如下代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>magnifier</title>

<script src=" http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

var Magnifier = {

imgURL: null,
imgContainer: null,
imgScale: null,

init: function(url, imageContainer, scale) {
this.imgURL = url;
this.imgScale = scale;
this.imgContainer = imageContainer;

var browserDiv = document.createElement('div');
jQuery(browserDiv).attr('id', 'imageBrowser').css({ position: 'absolute', border: '1px #000 solid', zIndex: 20 }).hide();
imageContainer.append(browserDiv);

var bigImageDiv = document.createElement('div');
jQuery(bigImageDiv).attr('id', 'bigImageDiv').css({ overflow: 'hidden', position: 'absolute', border: '1px #000 solid', zIndex: 100 }).hide();
jQuery('body').append(bigImageDiv);

var bigImage = document.createElement('img');
jQuery(bigImage).attr({ id: 'bigImage', src: url }).css({ position: 'absolute' });
jQuery('#bigImageDiv').append(bigImage);

$("#btnOpen").click(function() {
imageContainer.mousemove(Magnifier.start);
imageContainer.mouseout(Magnifier.end);
});

$("#btnClose").click(function() {
jQuery('#magnifier').unbind('mousemove').unbind('mouseout');
});
},

start: function(e) {
e = Magnifier.fixE(e);
var scale = Magnifier.imgScale;
var x = Magnifier.getMouse(e).x;
var y = Magnifier.getMouse(e).y;
var browserDivW = jQuery('#magnifier img').width() / scale;
var browserDivH = jQuery('#magnifier img').height() / scale;
var positionImage = Magnifier.imgContainer.offset();
var browserDivT = y - browserDivH / 2 - positionImage.top;
var browserDivL = x - browserDivW / 2 - positionImage.left;
if (browserDivT <= 0) browserDivT = 0;
if (browserDivL <= 0) browserDivL = 0;
if (browserDivT >= Magnifier.imgContainer.height() - browserDivH - 2) {
browserDivT = Magnifier.imgContainer.height() - browserDivH - 2;
};
if (browserDivL >= Magnifier.imgContainer.width() - browserDivW - 2) {
browserDivL = Magnifier.imgContainer.width() - browserDivW - 2;
};
jQuery('#imageBrowser').css({ width: browserDivW + 'px', height: browserDivH + 'px', top: browserDivT + 'px', left: browserDivL + 'px' });
jQuery('#imageBrowser:hidden').show();

jQuery('#bigImageDiv').css({ width: Magnifier.imgContainer.innerWidth() + 'px', height: Magnifier.imgContainer.innerHeight() + 'px', top: positionImage.top + 'px', left: positionImage.left + Magnifier.imgContainer.width() + 10 + 'px' });
jQuery('#bigImageDiv:hidden').show();

jQuery('#bigImage').css({ width: Magnifier.imgContainer.innerWidth() * scale + 'px', height: Magnifier.imgContainer.innerHeight() * scale + 'px', top: -(jQuery('#imageBrowser').offset().top - positionImage.top) * scale + 'px', left: -(jQuery('#imageBrowser').offset().left - positionImage.left) * scale + 'px' });
},

end: function(e) {
e = Magnifier.fixE(e);
var toObj = e ? e.relatedTarget : event.toElement;
if (toObj.tagName == "DIV" || toObj == this) {
return;
};
jQuery('#imageBrowser').hide();
jQuery('#bigImageDiv').hide();
},

fixE: function(e) {
if (typeof e == 'undefined') {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
},

getMouse: function(e) {
e = e || window.event;
return pointer = {
x: e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)),
y: e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))
};
}
}

jQuery(document).ready(function() {
Magnifier.init(" http://static.niu.com/www/web/catch/2008/2/20/1203479158450.jpg", jQuery('#magnifier'), 5);
});

</script>

<style>
#magnifier
{
width: 300px;
height: 400px;
position: absolute;
top: 100px;
left: 100px;
}
#magnifierImg
{
width: 300px;
height: 400px;
}
</style>
</head>
<body>
<div id="magnifier">
<img src=" http://static.niu.com/www/web/catch/2008/2/20/1203479158450.jpg" id="magnifierImg" />
</div>
<p>
</p>
<form>
<input type="button" value="Open" id="btnOpen" />
<input type="button" value="Close" id="btnClose"/>
</form>
</body>
</html>