>问题描述
vue是一个学习曲线相对平缓的响应式框架,利用vue可以做到素材图片的动态裁剪、切换。
将本文要解决的问题抽象成基本原型进行描述:下图,为一个尺寸相对固定的素材图片,实现的目标是每次只实现一格图片,如下所示:
-----》
同时,还要做到页面的动态响应。
>解决思路
问题的难度就演变成了如何实现图片的“切片效果”以及动态响应。
切片问题还算简单,利用div+img,div套用overflow:hidden的style,然后内嵌的img做一个relative的偏移即可;而动态响应,则需要借助vue中关于内联样式的绑定和计算属性的相关特性。
>代码
HTML:
<html>
<head>
<script src&#