本文主要是介绍js实现图片放大镜,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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>
这篇关于js实现图片放大镜的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!