jqzoom
https://github.com/mrenzidev/jqzoom
jQuery的图片放大镜,参考例子就可以用了
js-image-zoom
纯js实现的图片放大镜,这个简单好用一些
https://github.com/malaman/js-image-zoom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>Title</title>
<!-- <script src="https://unpkg.com/js-image-zoom@0.4.1/js-image-zoom.js" type="application/javascript"></script> -->
<script src="../package/js-image-zoom.js"></script>
</head>
<body>
<div id="img-container" style="width: 500px; height:300px; border: 5px solid red;">
<img src="1.jpg" />
<div>
<script>
var options1 = {
width: 400,
zoomWidth: 500,
offset: {vertical: 0, horizontal: 10}
};
// If the width and height of the image are not known or to adjust the image to the container of it
//如果图像的宽度和高度未知,或将图像调整到填满容器
var options2 = {
fillContainer: true,
offset: {vertical: 0, horizontal: 10}
};
new ImageZoom(document.getElementById("img-container"), options2);
</script>
</body>
</html>