一行js代码搞定xue项目需要点击图片放大缩小，其实主要用的是用到了vue:class的动态切换，内容比较简单。一开始我把维护的需求想得太复杂了，和测试小姐姐聊了一下才反应过来。

两个月不到跟了四个项目，现在是维护改bug阶段，一直加班加的感觉整个人已经不是小仙女了，是黄脸婆系列~话不多说，上代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>图片点击放大缩小</title>

<style>

div, ul, li, span, img {

    margin: ;

    padding: ;

    display: flex;

    box-sizing: border-box;

}

.vueBox{

    text-align: center;

    margin-left: 300px;

    position: relative;

}

img {

 transform: scale();          /*图片原始大小1倍*/

 transition: all ease .5s; }  /*图片放大所用时间*/

 img.active {

 transform: scale();          /*图片需要放大3倍*/

 position: absolute;           /*是相对于前面的容器定位的，此处要放大的图片，不能使用position：relative；以及float，否则会导致z-index无效*/

 z-index: ; }   

</style>

</head>

<body>

<div class="vueBox">

    <img :class="{'active':isChoose}"  src="http://www.baidu.com/img/bd_logo.png" style="width: 150px" @click="imgScc">

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

    const vm = new Vue({

        el: ".vueBox",

        data: {

            isChoose:false

        },

        methods:{

            imgScc:function () {

                this.isChoose = !this.isChoose  

            }

        }

    });

</script>

</body>

</html>

正常大小效果

点击后，放大2倍效果

当再次点击时，会恢复到正常大小状态

关于z-index不起作用的文章推荐：

https://blog.csdn.net/apple_01150525/article/details/76546367

vue项目 一行js代码搞定点击图片放大缩小的更多相关文章

  1. vue项目使用vue-photo-preview插件实现点击图片放大预览和移动

    官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...

  2. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  3. 论vue项目api相关代码的组织方式

    论vue项目api相关代码的组织方式 看了下项目组同事的代码,发现不同项目有不同的组织版本 版本一: ├─apis │ a.api.js │ b.api.js │ b.api.js │ d.api.j ...

  4. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  5. js+jquery+html实现在三种不通的情况下，点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  6. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  7. Android 实现九宫格、点击图片放大全屏浏览等

    项目GitHub地址https://github.com/tikeyc/TNinePlaceGridView_Android https://github.com/tikeyc/TikeycAndro ...

  8. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  9. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

随机推荐

  1. office 2013母版保存并调用

    如果觉得某个ppt的母版不错,想保存下来以后使用的话,那么执行 开始->另存为->  选择位置和格式,注意格式选择potx. 之后如果想要使用这组母版,怎么办呢? 浏览主题,打开之前保存的 ...

  2. R学习笔记 ---- 系列文章

    R实战 开篇:介绍R的使用 R学习笔记 第五篇:字符串操作 R学习笔记 第六篇:数据变换和清理 R学习笔记 第四篇:函数,分支和循环 R学习笔记 第三篇:数据框 R学习笔记 第二篇:矩阵.数组和列表 ...

  3. Django models中关于blank与null

    建立一个简易Model class Person(models.Model): GENDER_CHOICES=( (1,'Male'), (2,'Female'), ) name=models.Cha ...

  4. centos6.6 myphpadmin

    基本环境为:Centos6.6+Apache2.2.15+php5.3.3+Mysql5.1.73 开始下载了网站上最新版本myPhpAdmin4.3.8安装后打开浏览器为空白页,后百度后都讲是与PH ...

  5. 【整理总结】目录 - 代码沉淀 - 常见Nuget包介绍及使用

    为了团队项目或者后期代码维护方便,现在项目已经极致推荐使用Nuget管理第三方类库了,所以下面列举的类库,都会在Nuget上获取到.目录排序不分先后,如果查找困难,请使用 ctrl + F 重要提示: ...

  6. [转]VS2010 常用插件

    本文来自:http://developer.51cto.com/art/201403/432954_all.htm 虽然VS2010IDE功能已经非常强大了,但是在有些地方还是可以优化,或者说有更合适 ...

  7. 蓝桥杯历届试题-垒色子(DP+矩阵快速幂)

    一.题目 垒骰子 赌圣atm晚年迷恋上了垒骰子,就是把骰子一个垒在另一个上边,不能歪歪扭扭,要垒成方柱体.经过长期观察,atm 发现了稳定骰子的奥秘:有些数字的面贴着会互相排斥!我们先来规范一下骰子: ...

  8. ACM刷题踩坑记录

    2017-12-26: 1.再次被写法坑了好长一会,调了半天的bug,还是没找出来.最后,发现,又坑在这个小细节上了.这样子写,第一个if和第三个else在一次循环中都会执行,然后,就GG了. 要注意 ...

  9. 接口自动化（六）--使用QQ邮箱发送邮件

    接口测试执行完发送一个邮件,这里使用QQ邮箱发送,先要拿到QQ邮箱授权码,方法自行百度 # coding=utf-8 import smtplib from email.mime.text impor ...

  10. python3.6的turtle库练手

    import turtle as t t.speed(10) t.pencolor("yellow") t.fillcolor("red") for num i ...