如何在网页中点击图片，实现图片放大效果呢？

我们可以用zoom插件来实现这个功能。

目录

1、什么是zoom

2、云盘下载

3、如何使用？

4、DEMO实例

1、什么是zoom

一个简单的图像缩放jQuery插件； 

支持浏览器版本（ie9+）

github地址：GitHub - fat/zoom.js: Medium's Image Zoom for jQuery

2、云盘下载

如果访问github比较慢，你也可以在云盘链接中进行下载。文件内容是一致的。

阿里云盘：https://www.aliyundrive.com/s/8eWwm5674tV

3、如何使用？

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

<link href="css/zoom.css" rel="stylesheet">
<script src="js/zoom.js"></script>

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

<script src="js/transition.js"></script>
data-action="zoom"向要使其可缩放的图像添加属性。例如：
<img src="img/blog_post_featured.png" data-action="zoom">

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>

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

 

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