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 插件直接相关。
领取专属 10元无门槛券
手把手带您无忧上云