Vue 悬停缩放(Zoom on Hover)
made with Vuejs

Vue 悬停缩放(Zoom on Hover)

这是一个根据鼠标悬停缩放响应式的图像组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue 悬停缩放(Zoom on Hover)是一个根据鼠标悬停缩放响应式的图像组件。组件元素显示具有父元素宽度的图像,显示完整图像,悬停时在图像区域中缩放图像。

安装

直接在组件中引入 zoomOnHover.jszoomOnHover.css

<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript" src="../zoomOnHover.js"></script>
<link rel="stylesheet" type="text/css" href="../zoomOnHover.css"/>

使用

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

全部选项

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

注册组件

new Vue({
  el: "#app",
  components: {
    zoomOnHover: zoomOnHover
  }
})

示例

image.png

image.png

作者

Intera GmbH

相关项目

这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个图片显示视差指令。
这是一个实现Material设计风格的纹波效果的插件。