spz-zoom 缩放

图片缩放器。

布局

container

何时使用

需要对图片进行缩放器时。

代码演示

基本用法

最基本用法，根元素内部必须有一个子元素，默认使用第一个子元素来进行缩放。

<spz-zoom zoom-ratio="1.8" layout="container">
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>

点击缩放

当鼠标点击原始图片后才可以开始进行缩放操作。

<spz-zoom interact="click" zoom-ratio="2" layout="container">
  <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>

分离容器

进行缩放操作时指定一个容器进行效果展示，而不是元素本身位置。

<spz-zoom zoom-ratio="1.8" layout="container" container-id="container">
    <spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
  </spz-zoom>
  <div id="container"></div>

属性

属性名	说明	类型	默认值	是否必需
container-id	缩放效果展示的容器ID，当此属性不存在时使用元素本身作为展示的容器	string	-	否
interact	触发行为，可选：`click` \| `touch` \| `mouseover`	string	`mouseover`	否
zoom-ratio	缩放比例	number	-	是
zoom-in	当图片进行缩放时，元素会自动加入该属性	-	-	否

spz-zoom 缩放

布局

布局

何时使用

代码演示

基本用法

点击缩放

分离容器

属性

事件

zoomIn

zoomOut