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>

相关推荐

  1. js实现图片放大镜

    2024-04-06 12:44:03       42 阅读
  2. js使用canvas实现图片鼠标滚轮放大缩小拖拽预览

    2024-04-06 12:44:03       47 阅读
  3. 可视化学习:实现Canvas图片局部放大镜

    2024-04-06 12:44:03       48 阅读
  4. js实现修改图片的底色

    2024-04-06 12:44:03       44 阅读
  5. js 实现图片纵向拼接并下载

    2024-04-06 12:44:03       32 阅读
  6. CSS实现图片放大缩小的几种方法

    2024-04-06 12:44:03       56 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-06 12:44:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-06 12:44:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-06 12:44:03       87 阅读
  4. Python语言-面向对象

    2024-04-06 12:44:03       96 阅读

热门阅读

  1. Streamlit 构建大语言模型 (LLM) web 界面

    2024-04-06 12:44:03       33 阅读
  2. txpcg面经总结

    2024-04-06 12:44:03       27 阅读
  3. 90天玩转Python-02-基础知识篇:初识Python与PyCharm

    2024-04-06 12:44:03       40 阅读
  4. c++高精度计算20除法High-precision20calculate240101

    2024-04-06 12:44:03       42 阅读
  5. 利用python 实现微信自动回复

    2024-04-06 12:44:03       33 阅读
  6. 拼多多商家电话采集步骤,软件使用教程详解

    2024-04-06 12:44:03       78 阅读
  7. JVM专题——类文件结构

    2024-04-06 12:44:03       40 阅读
  8. 如何实现Docker容器数据的持久化存储?

    2024-04-06 12:44:03       30 阅读