使用Zoomer将平滑缩放效果应用于图像

最新推荐文章于 2024-05-28 09:57:37 发布

cune1359

最新推荐文章于 2024-05-28 09:57:37 发布

阅读量211

点赞数

文章标签： java python css html js ViewUI

有句名言说： “一张图片值一千字。” 在网页设计中，它变得更加重要。尤其是在展示产品时，例如在电子商务网站中。毕竟，人们在购买之前需要清楚地掌握并以视觉方式查看产品。

使图像尽可能大无法解决此问题，因为它还会占用大量可用空间。因此，最好的选择是使图像可缩放。使用Zoomer，您可以轻松实现这一目标。

Zoomer是一个免费的javascript库， 使您的图像可以缩放 。启用后，它将添加自己的样式和一个用于放大和缩小的按钮。它还支持多个图像，这些图像将自动转换为图像库。

初始化

在初始化它之前，首先将Zoomer脚本（您可以从GitHub页面获得）包括到您的项目中，如下所示：

<script src="js/jquery.fs.zoomer.js" type="text/javascript"></script>

Zoomer将以其样式包围图像，并添加一个放大和缩小按钮。您还应该在head的结束标记之前包含Zoomer样式表。

<head>
..
<link href="css/jquery.fs.zoomer.css" rel="stylesheet" type="text/css">
..
</head>

放大和缩小

要创建新的Zoomer，可轻松在包装器中包含图像。不要忘记给包装器指定固定的高度和宽度，因为所有可用空间都将由新标记填充。例如，我创建一个名称为.zoomable的包装器，将高度定义为500px，宽度定义为100％，如下所示：

.zoomable { 
    height: 500px; 
    width: 100%; 
}

然后，按照以下步骤包装要缩放的图像：

<div class="zoomable">
    <img src="img/image-demo.jpg" />
</div>

插件将调整图像的大小，直到包装器有一些可用空间。而且，如果您在包装器中添加了更多图片，则插件会自动检测到它，然后使用分页按钮建立自己的图库。

那么，图像可缩放吗？还没。我们仍然需要调用该插件，并在其中包含我们刚刚创建的类：

$(".zoomable").zoomer();

完成！该图像现在可以缩放。

提供选项

如果您对按钮，背景，缩放比例等不满意，则可以通过添加一个小JavaScript代码段对其进行自定义。只需将其放入插件脚本即可。

$(".zoomable").zoomer({
	customClass: "custom",
	increment: 0.05
})

您还可以使用Zoomer处理已切成相等块的非常大的图像。为此，在使用source初始化插件时，必须传递磁贴。给它一个缩略图，然后使用以下代码段声明所有切片的图像源：

$(".zoomable").zoomer({
    source: {
        thumbnail: "img/thumbnail.jpg",
        tiles: [
			["img/01-01.jpg", "img/01-02.jpg", "img/01-03.jpg"],
            ["img/02-01.jpg", "img/02-02.jpg", "img/02-03.jpg"],
            ["img/03-01.jpg", "img/03-02.jpg", "img/03-03.jpg"]
        ]
    }
});

在HTML代码中，仅在没有img源的情况下调用包装器，如下所示：