前言

 利用CSS实现图片的点击缩放是一个很值得研究的效果。在某些业务需求场景中,我们可能并没有足够的空间展示过大的图片,这就需要限制图片容器的宽度和高度。然而图片限制了宽度,一些图片的细节便又无法看清。

 实现这种需求的一种直观方式是固定图片宽高,然后提供点击缩放的功能,这是本文要讨论的要点。

 需要额外说明的是,CSS实现业务需求的方式是灵活的,这与开发者的功底也是密切相关的,实现上述的业务需求并非只有一种方式,甚至限于作者水平,以下所述也是不完善的,仅作分享,读者可自行探索和发挥。

一、需求关键点

1、固定宽高

2、点击放大

3、再次点击缩小

4、优先用CSS实现

 这里强调了优先使用CSS,这是因为同样的效果,使用CSS实现一般而言性能更好。况且使用JS直接修改样式,易导致维护时难以定位问题。在开发中,建议实现JS和CSS的松耦合。这对代码优雅有利,利于后期维护。

二、HTML结构

    <div class="img-container">
<img src="./test.jpg" alt="案例图片" class="img">
</div>

以上,只有两层结构,我们的CSS都作用于这两层元素上。个人观点,HTML结构越简单越加清晰。只有当简单的HTML实在无法实现相关业务需求时,才建议添加元素用于实现复杂效果。

三、CSS代码

1、给容器设置固定宽高

2、将img元素设置为容器的宽高

3、设置img元素放大时的样式

4、适当使用定位

        .img-container{
position: relative; width: 100px;
height: 100px;
}
.img-container .img{
height: 100%;
width: 100%;
cursor: pointer;
}
.img-container .img.active{
position: absolute; height: 400%;
width: 400%;
}

四、JS代码

 1、本文主要讨论CSS,但要实现图片点击缩放,光使用CSS hover伪类的体验并不佳,鼠标移开就失去放大效果,无法悬停,因此使用JS的点击事件来进行监听。

 2、JS部分的主要思想是改变图片的类名,这样可以实现JS和CSS的松耦合,避免JS直接改变样式,利于维护。

        var img = document.getElementsByClassName('img');

        // 点击图片本身
img[0].addEventListener('click',function(e){
// 防止被document监听到
e.stopPropagation(); const isExpand = this.className.indexOf('active') !== -1; if (!isExpand) {
this.className += ' active';
} else{
this.className = this.className.replace('active', '');
} ;
}); // 点击其他位置
document.addEventListener('click',function(e){
img[0].className = img[0].className.replace('active', '');
});

 以上JS部分显得有些繁琐,事实上,这是使用原生JS时几乎必然会呈现的特点。假如使用Vue.js这样的双向绑定框架,对类名进行绑定,那么JS将简单到只需几句代码。或者使用jquery这样的库,那么也将极大简化。

五、优化改进

 以下是几个可以适当优化提升的地方:

1、设置酷炫的动画效果;

2、兼容性问题。

CSS开发技巧(三):图片点击缩放的更多相关文章

  1. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  2. 提高你css技能的css开发技巧

    好久没整理博客了 进来啰嗦两句   继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...

  3. 提高你css技能的css开发技巧(转载)

    一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...

  4. CSS开发技巧(二):表格合并边框后的单元格宽度计算

    前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...

  5. Web之CSS开发技巧: CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  6. iOS Swift 实现图片点击缩放回弹动画

    效果就是下面这个样子: 思路借鉴的是MZTimerLabel,有想过做一个自定义的ImageView,但那样的话之前view用必须要改代码,索性就按照MZTimerLabel这个方式实现,简单易用,从 ...

  7. Web之CSS开发技巧: CSS @media

    CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...

  8. 微信小程序开发(三)点击事件

    接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but&quo ...

  9. CSS开发技巧(四):解决flex多行布局的行间距异常、子元素高度拉伸问题

    在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...

随机推荐

  1. C++类的成员初始化

    C++类的成员初始化 学到一个类的成员初始化,目前已知的用途是给类内部的const类型变量进行赋值. 首先,如果像这么干,编译器会报错. class MyClass{ public: Myclass( ...

  2. 一篇blog带你了解java中的锁

    前言 最近在复习锁这一块,对java中的锁进行整理,本文介绍各种锁,希望给大家带来帮助. Java的锁 乐观锁 乐观锁是一种乐观思想,即认为读多写少,遇到并发写的可能性低,每次去拿数据的时候都认为别人 ...

  3. Hadoop(五):HDFS的JAVA API基本操作

    HDFS的JAVA API操作 HDFS在生产应用中主要是客户端的开发,其核心步骤是从HDFS提供的api中构造一个HDFS的访问客户端对象,然后通过该客户端对象操作(增删改查)HDFS上的文件. 主 ...

  4. 【numpy】新版本中numpy(numpy>1.17.0)中的random模块

    numpy是Python中经常要使用的一个库,而其中的random模块经常用来生成一些数组,本文接下来将介绍numpy中random模块的一些使用方法. 首先查看numpy的版本: import nu ...

  5. Google GMS介绍

    Google GMS介绍GMS全称为GoogleMobile Service.GMS目前提供有Search.Search by Voice.Gmail.Contact Sync.Calendar Sy ...

  6. Python Modules and Packages – An Introduction

    This article explores Python modules and Python packages, two mechanisms that facilitate modular pro ...

  7. Scala函数式编程(六) 懒加载与Stream

    前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...

  8. 29.3 ArrayList、List、LinkedList(链表)优缺点

    ArrayList.List特点:查询快.增删慢 链表特点:查询慢,增删快 案例 package day29_collection集合体系; import java.util.ArrayList; i ...

  9. 页面存在多个url,使用jmeter进行遍历操作

    有一次遇见一个问题:进入网站后,有多个相同的url,但是仅url后面的路径中id有区别,如下图:这时我想要遍历点击查看url详情内容:那么就可以使用一个“逻辑控制器---foreach控制器” 如下: ...

  10. Java成长第五集--面向对象设计的五大原则

    S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写.以下图说明: 下面就个人的理解来说说这五大原则的含义到 ...