利用zoom插件实现点击图片放大效果

怼烎@ 2023-10-10 17:54 31阅读 0赞

> 如何在网页中点击图片，实现图片放大效果呢？
> 
> 我们可以用zoom插件来实现这个功能。

**目录**

1、什么是zoom

2、云盘下载

3、如何使用？

4、DEMO实例

--------------------

## 1、什么是zoom ##

> 一个简单的图像缩放jQuery插件；
> 
> 支持浏览器版本（ie9+）
> 
> github地址：[GitHub - fat/zoom.js: Medium's Image Zoom for jQuery][GitHub - fat_zoom.js_ Medium_s Image Zoom for jQuery]

## 2、云盘下载 ##

> 如果访问github比较慢，你也可以在云盘链接中进行下载。文件内容是一致的。
> 
> 阿里云盘：[https://www.aliyundrive.com/s/8eWwm5674tV][https_www.aliyundrive.com_s_8eWwm5674tV]

## 3、如何使用？ ##

将 zoom.js 和 zoom.css 文件链接到您的站点或应用程序。

> zoom.js 依赖于Bootstrap 中的transition.js 文件，因此请确保也包含该文件。

## 4、DEMO实例 ##

<!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>zoom实例演示</title>
        <style>
            img{
                width: 500px;
                height: 300px;
            }
        </style>
        <link href="https://www.ewbang.com/dist/zoom/zoom.css" rel="stylesheet">
    </head>
    <body>
        <img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/503/503-bigskin-2.jpg" data-action="zoom" >
        <img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/503/503-bigskin-2.jpg" data-action="zoom" >
        <img src="https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/503/503-bigskin-2.jpg" data-action="zoom" >
    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
        <script src="https://www.ewbang.com/dist/zoom/zoom.js"></script>
    </body>
    </html>

> 当点击图片的时候，图片会放大，再次点击的时候，图片会还原。

![d2ec19888e8144889766d7e5d219f0b9.png][]

[GitHub - fat_zoom.js_ Medium_s Image Zoom for jQuery]: https://github.com/fat/zoom.js
[https_www.aliyundrive.com_s_8eWwm5674tV]: https://www.aliyundrive.com/s/8eWwm5674tV
[d2ec19888e8144889766d7e5d219f0b9.png]: https://img-blog.csdnimg.cn/d2ec19888e8144889766d7e5d219f0b9.png