CSS开发技巧(三):图片点击缩放
2024-09-02 22:31:39
前言
利用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、兼容性问题。
最新文章
- c语言文法简化版文法
- C#控制台项目更改运行文件
- [安卓] 12、开源一个基于SurfaceView的飞行射击类小游戏
- Eclipse中使用maven构建web项目中遇到的问题
- 初识onselectstart
- C++开源代码覆盖率工具OpenCppCoverage介绍(Windows)
- poj蚂蚁问题
- android数据存储之SharedPreferences
- Python学习教程(learning Python)--3.1 Python的if分支语句
- Codeforces Gym 100425H H - Football Bets 构造
- Java知识思维导图
- Ubuntu 之旅—— 调整扩展屏分辨率
- Asp.net Mvc4 基于Authorize实现的模块访问权限
- VM中装Linux换ISO文件报错";该光盘无法被挂载";
- angular 表达式与指令
- asp.net core 排序过滤分页组件:sieve(1)
- MVC4 发布到II7或者IIS7.5遇到NO Find问题
- APP多开教程
- [LeetCode] Wiggle Sort II 摆动排序之二
- _mount_vendor