查看: 3180|回复: 0

[DIV/CSS] Vue.js+14行代码----实现图片的放大缩小

发表于 2018-3-16 08:00:03
前言

最近有个需求,说系统上图片太小啦,有些图片看不清,so马上来做。

实现效果

图片描述

CSS
  1. img {
  2. transform: scale(1); /*图片原始大小1倍*/
  3. transition: all ease 0.5s; } /*图片放大所用时间*/
  4. img.scale {
  5. transform: scale(2); /*图片需要放大2倍*/
  6. position: relative; /*相对定位,是相对于前面的容器定位的*/
  7. z-index: 100; } /*属性设置元素的堆叠顺序,保证图片放大后处于最上层*/
复制代码
JS
  1. var app=new Vue({
  2. data: {
  3. imgIstrue:[] /*定义数组*/
  4. },
  5. methods: {
  6. getData: function(){ /*这个方法是我自己定义的,作用:为了拿到后台数据*/
  7. var row = 10; /*这个是后台拿到的数据条数,可以根据length获取*/
  8. for(var i =0;i<row ;i++) {
  9. app.imgIstrue[i] = false; /*初始化为false*/
  10. }
  11. },
  12. imgScale:function (index) { /*这个方法是为了标识改变被点击图片的状态*/
  13. var isTrue = app.imgIstrue[index]; /*获取被点击元素当前的值 false或true*/
  14. app.imgIstrue.forEach(function (val,row) {
  15. app.imgIstrue.splice(row,1,false) /*刷新数组,将数组所有值设置为false,即图片原始状态*/
  16. })
  17. app.imgIstrue.splice(index,1,!isTrue) /*将被点击数组元素的值反转 用于记录状态的改变*/
  18. }
  19. }
  20. });
复制代码
html
  1. <img :class="{scale:imgIstrue[index]}" src="http://www.baidu.com/img/bd_logo.png" style="width: 150px" @click="imgScale(index)">
复制代码
具体项目可见---->点我


回复

使用道具 举报