CSS开发技巧(三):图片点击缩放
前言
利用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开发技巧(三):图片点击缩放的更多相关文章
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
- 提高你css技能的css开发技巧
好久没整理博客了 进来啰嗦两句 继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
- 提高你css技能的css开发技巧(转载)
一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...
- CSS开发技巧(二):表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
- Web之CSS开发技巧: CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- iOS Swift 实现图片点击缩放回弹动画
效果就是下面这个样子: 思路借鉴的是MZTimerLabel,有想过做一个自定义的ImageView,但那样的话之前view用必须要改代码,索性就按照MZTimerLabel这个方式实现,简单易用,从 ...
- Web之CSS开发技巧: CSS @media
CSS @media 规则非常适合于将 HTML 或 XML 文档定位为目标输出方法.目前,print 媒体的使用非常普遍,与实现单独的 “可打印版本” 相比,print 提供了更加整洁的方式来创建打 ...
- 微信小程序开发(三)点击事件
接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but&quo ...
- CSS开发技巧(四):解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
随机推荐
- C++类的成员初始化
C++类的成员初始化 学到一个类的成员初始化,目前已知的用途是给类内部的const类型变量进行赋值. 首先,如果像这么干,编译器会报错. class MyClass{ public: Myclass( ...
- 一篇blog带你了解java中的锁
前言 最近在复习锁这一块,对java中的锁进行整理,本文介绍各种锁,希望给大家带来帮助. Java的锁 乐观锁 乐观锁是一种乐观思想,即认为读多写少,遇到并发写的可能性低,每次去拿数据的时候都认为别人 ...
- Hadoop(五):HDFS的JAVA API基本操作
HDFS的JAVA API操作 HDFS在生产应用中主要是客户端的开发,其核心步骤是从HDFS提供的api中构造一个HDFS的访问客户端对象,然后通过该客户端对象操作(增删改查)HDFS上的文件. 主 ...
- 【numpy】新版本中numpy(numpy>1.17.0)中的random模块
numpy是Python中经常要使用的一个库,而其中的random模块经常用来生成一些数组,本文接下来将介绍numpy中random模块的一些使用方法. 首先查看numpy的版本: import nu ...
- Google GMS介绍
Google GMS介绍GMS全称为GoogleMobile Service.GMS目前提供有Search.Search by Voice.Gmail.Contact Sync.Calendar Sy ...
- Python Modules and Packages – An Introduction
This article explores Python modules and Python packages, two mechanisms that facilitate modular pro ...
- Scala函数式编程(六) 懒加载与Stream
前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...
- 29.3 ArrayList、List、LinkedList(链表)优缺点
ArrayList.List特点:查询快.增删慢 链表特点:查询慢,增删快 案例 package day29_collection集合体系; import java.util.ArrayList; i ...
- 页面存在多个url,使用jmeter进行遍历操作
有一次遇见一个问题:进入网站后,有多个相同的url,但是仅url后面的路径中id有区别,如下图:这时我想要遍历点击查看url详情内容:那么就可以使用一个“逻辑控制器---foreach控制器” 如下: ...
- Java成长第五集--面向对象设计的五大原则
S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写.以下图说明: 下面就个人的理解来说说这五大原则的含义到 ...