根据jquery.zoom插件实现原生的放大缩小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.imgg {
height: 778.93px;
width: 560.64px;
position: relative;
}
.imgg .img1{
width: 100%;
height: 100%;
object-fit: cover;
}
.imgg2 {
height: 778.93px;
width: 560.64px;
position: relative;
}
.imgg2 .img3{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="imgg">
<img class="img1" src="https://tobel.qodeinteractive.com/wp-content/uploads/2021/04/Product-feat-img-13.jpg" alt="111">
<img class="img1" src="https://tobel.qodeinteractive.com/wp-content/uploads/2021/04/Product-feat-img-13.jpg" alt="222">
</div>
</body>
<script>
(function(){
const defaults = {
url: false,
alt: '',
callback: false,
target: false,
duration: 120,
on: 'mouseover', // other options: click, toggle
touch: true, // enables a touch fallback
magnify: 1
};
function zoomInit(target, source, img, magnify) {
var targetHeight,
targetWidth,
sourceHeight,
sourceWidth,
xRatio,
yRatio,
offsetLeft,
offsetTop,
position = target.getAttribute('position')
target.style.position = /(absolute|fixed)/.test(position) ? position : 'relative';
target.style.overflow = 'hidden';
img.style.width = img.style.height = '';
img.classList.add('zoomImg');
img.style.cssText = 'position: absolute;top: 0;left: 0;opacity: 0; border: none;max-width: none;max-height: none;height';
img.style.height = img.height * magnify + 'px';
img.style.width = img.width * magnify + 'px';
target.append(img);
return {
init: function() {
targetWidth = target.offsetWidth;
targetHeight = target.offsetHeight;
if (source === target) {
sourceWidth = targetWidth;
sourceHeight = targetHeight;
} else {
sourceWidth = source.offsetWidth;
sourceHeight = source.offsetHeight;
}
xRatio = (img.width - targetWidth) / sourceWidth;
yRatio = (img.height - targetHeight) / sourceHeight;
offsetLeft = source.offsetLeft;
offsetTop = source.offsetTop;
},
move: function (e) {
var left = (e.pageX - offsetLeft),
top = (e.pageY - offsetTop);
top = Math.max(Math.min(top, sourceHeight), 0);
left = Math.max(Math.min(left, sourceWidth), 0);
img.style.left = (left * -xRatio) + 'px';
img.style.top = (top * -yRatio) + 'px';
}
};
};
function setOpacity (element, v) {
if (window.ActiveXObject) {
element.style.filter = "alpha(opacity="
+ v * 100 + ")"; // IE
} else {
element.style.opacity = v; // Gecko/Opera
}
}
zoomIMG = function (_this, options) {
let
settings = Object.assign(defaults, options),
//target will display the zoomed image
target = settings.target || _this,
//source will provide zoom location info (thumbnail)
source = _this,
img = document.createElement('img'),
mousemove = 'mousemove.zoom',
clicked = false,
touched = false;
// If a url wasn't specified, look for an image element.
if (!settings.url) {
var srcElement = source.querySelector('img');
if (srcElement) {
settings.url = srcElement.getAttribute('data-src') || srcElement.src;
}
if (!settings.url) {
return;
}
}
// If a alt wasn't specified, look for an image element.
if (!settings.alt) {
var srcElement = source.querySelector('img');
if (srcElement) {
settings.alt = srcElement.alt;
}
if (!settings.alt) {
return;
}
}
img.onload = function () {
var zoom = zoomInit(target, source, img, settings.magnify);
function start(e) {
zoom.init();
zoom.move(e);
setOpacity(img, 1)
}
function stop() {
setOpacity(img, 0)
}
if (settings.on === 'mouseover') {
zoom.init();
source.addEventListener('mouseenter', start);
source.addEventListener('mouseleave', stop);
source.addEventListener('mousemove', zoom.move);
}
// Touch fallback
if (settings.touch) {
source.addEventListener('touchstart', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
} else {
touched = true;
start( e.touches[0] || e.changedTouches[0] );
}
});
source.addEventListener('touchmove', function (e) {
e.preventDefault();
zoom.move( e.touches[0] || e.changedTouches[0] );
});
source.addEventListener('touchend', function (e) {
e.preventDefault();
if (touched) {
touched = false;
stop();
}
});
}
if (Object.prototype.toString.call(settings.callback) === '[object Function]') {
settings.callback.call(img);
}
};
img.alt = settings.alt;
img.src = settings.url;
};
})()
const imgg = document.querySelector('.imgg')
zoomIMG(imgg);
</script>
</html>
