easyzoom jquery的两个相互控制的实例

EasyZoom 是一个基于 jQuery 的图片放大插件，它提供了一种简单且易于使用的方式来实现图像的缩放和放大功能。它可以在网页中展示高分辨率的图像，并且在鼠标悬停时可以放大图像的细节，提供更好的用户体验。

以下是两个相互控制的 EasyZoom 实例：

实例 1：图片切换与放大缩小这个实例展示了一个页面上包含多个图片的情况，并且可以通过点击缩略图来切换图片。同时，当鼠标悬停在图片上时，可以通过滚轮来放大或缩小图像。

<!DOCTYPE html>
<html>
<head>
    <title>EasyZoom实例1</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.css">
    <style>
        .thumbnails {
            display: flex;
            justify-content: center;
        }
        .thumbnail {
            margin: 0 10px;
            cursor: pointer;
        }
        .thumbnail img {
            width: 100px;
            height: 100px;
        }
        .zoom {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="thumbnails">
        <div class="thumbnail">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="thumbnail">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="thumbnail">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <div class="zoom">
        <img src="image1.jpg" alt="Zoomed Image">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.min.js"></script>
    <script>
        $(function() {
            var $thumbnails = $('.thumbnail');
            var $zoom = $('.zoom');

            $thumbnails.on('click', function() {
                var $this = $(this);
                var $selectedThumbnail = $this.find('img');
                var imgSrc = $selectedThumbnail.attr('src');

                $zoom.find('img').attr('src', imgSrc);
                $thumbnails.removeClass('active');
                $this.addClass('active');
            });

            $zoom.easyZoom();
        });
    </script>
</body>
</html>

推荐的腾讯云相关产品和产品介绍链接地址：暂无推荐的腾讯云相关产品与 EasyZoom 插件直接相关。

实例 2：放大镜效果这个实例展示了一个页面上只有一个图片的情况，并且在鼠标悬停时显示放大的图像。鼠标移动时，放大的图像也会相应移动，以提供更好的查看体验。

<!DOCTYPE html>
<html>
<head>
    <title>EasyZoom实例2</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.css">
    <style>
        .zoom {
            width: 500px;
            height: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="zoom">
        <img src="image.jpg" alt="Zoomed Image">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/easyzoom/dist/easyzoom.min.js"></script>
    <script>
        $(function() {
            var $zoom = $('.zoom');

            $zoom.easyZoom();
        });
    </script>
</body>
</html>

推荐的腾讯云相关产品和产品介绍链接地址：暂无推荐的腾讯云相关产品与 EasyZoom 插件直接相关。