鼠标悬停弹出图像查看器_悬停时具有缩放图像的响应图像

鼠标悬停弹出图像查看器

Vue悬停缩放 (vue-zoom-on-hover)

responsive image with zoomed image on hover.

悬停时具有缩放图像的自适应图像。

View demo 查看演示 Download Source 下载源

this vue.js component displays an image with the width of the parent element and on hover shows the full image or a scaled image in the image area

这个vue.js组件显示具有父元素宽度的图像，并且悬停在图像区域中显示完整图像或缩放图像

档案 (files)

zoomOnHover.js registers the vue component and defines zoomOnHover, a variable for the component configuration object. zoomOnHover.css contains the needed styles

zoomOnHover.js注册vue组件并定义zoomOnHover，这是组件配置对象的变量。 zoomOnHover.css包含所需的样式

用法 (usage)

minimal example (with an example div as parent container)

最小示例(示例div作为父容器)

<div style="width:400px">
  <zoom-on-hover img-normal="image.jpg"></zoom-on-hover>
</div>

all options

所有选项

<zoom-on-hover img-normal="image.jpg" img-zoom="bigger-image.jpg" :scale="1.5" :disabled="true"
  @loaded="onload" @resized="onresize"></zoom-on-hover>

特征 (features)

• enabled/disabled property

  启用/禁用属性

• custom scale for zoomed image

  自定义缩放比例的图像

• optionally a separate zoom image

  (可选)单独的缩放图像

• event when all images loaded

  加载所有图像时发生的事件

• event when images resized (responsive css, etc)

  图像调整大小时发生的事件(响应CSS等)

注意事项 (caveats)

if the parent container is bigger than the source image, the normal image stretches to the size of the parent container but the zoom image will have the original width (will be smaller for example)

如果父容器大于源图像，则普通图像会拉伸到父容器的大小，但缩放图像将具有原始宽度(例如，会更小)

翻译自: https://vuejsexamples.com/responsive-image-with-zoomed-image-on-hover/

鼠标悬停弹出图像查看器