纯css如何实现点击图片放大
本篇内容主要讲解“纯css如何实现点击图片放大”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“纯css如何实现点击图片放大”吧!
公司主营业务:网站设计制作、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出大悟免费做网站回馈大家。
纯css实现点击图片放大的方法:1、创建一个HTML示例文件;2、设置“
”;3、通过“function showBgImg(e) {...}”方法实现点击图片放大效果即可。
Css实战训练之图片点击放大
I. 背景
非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片
那么这个功能是怎么实现的呢? 正好学习了下css的基础知识,现在可以来实际的操作一把
1. 思路
首先对页面的结构进行拆分:
有一个弹窗,在弹窗中显示大图;且弹窗默认是隐藏的
主页面上可以放置很多图片,并添加点击事件
点击之后,弹窗显示,并展示大图
大图点击以下后,关闭弹窗
II. 实现
根据上面的描述,我们先来实现一个基础版本的,先写HTML
src='/upload/otherpic60/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
然后就是添加对应的样式,要求modal默认是隐藏的,所以如下(为了可以较好的区分弹窗,所以加了背景色和边框)
接下来就是点击显示大图的逻辑了,借助js来实现,
将上面的实现,组装成一个html之后,直接测试查看
虽然说上面的实现了我们预期的结果,但是有几点却不太满意
不是我们预期的弹窗效果,原图被挤下去了
弹窗中如果有个放大的动画效果就更好了(正好可以用到之前学习的animation)
对于图强中有很多图片时,点击放大怎么做
III. 进阶
首先是希望是真的弹窗,不影响既有的布局,则通常是设置position来做到, 如我们可以在modal外面再加一层,变成
其次就是弹窗的样式太丑,我们可以借助之前学习的边框阴影来实现美观的弹出效果,
改成图片全部填充背景
背景颜色去掉,加上阴影,加上白色边框
修改后的css如下
.modal {
display: none;
margin: auto;
padding-top: 5%;
width: 50%;
height: 80%;
z-index: 1;
background-color: white;
}
.modal img {
display: block;
padding: 10px;
margin: auto;
max-width: 100%;
max-height: 100%;
box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
border-radius: 12px;
border: 1px solid white;
}
接下来考虑添加动画,加上一个放大的效果
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
.modal img {
animation-name: zoom;
animation-duration: 0.6s;
}
接下来就是需要把这个变成通用的方案,支持多重图片的方式了,这个则主要是图片点击事件的修改了,将上面写死的地方,稍微变通一下即可
IV. 源码
最后给出所有的源码
小灰灰css学习笔记
src='/upload/otherpic60/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' />
到此,相信大家对“纯css如何实现点击图片放大”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文名称:纯css如何实现点击图片放大
标题URL:http://scyanting.com/article/jsdche.html