jquery 点击图片放大-CSS实战训练点击放大图片

bendan520 jquery

2023-09-05 0 4,424 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

CSS实战培训图片点击放大一、背景

很常见的一个功能，通常网站会显示缩略图，点击缩略图时会在弹出框中显示放大的图片

那么这个功能是如何实现的呢？刚刚学习了css基础知识，现在可以实际操作了

1. 想法

首先分解一下页面的结构：

二. 执行

根据前面的描述，我们先实现一个基础版本，先写HTML

复制

之后添加相应的样式，并且要求模态框默认隐藏，所以如下（为了更好的区分弹窗，添加了背景色和边框）


.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}
.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}
.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

复制

接下来就是点击显示大图的逻辑了，用js来实现。


    var modal = document.getElementById('modal');
    var bgImg = document.getElementById('bgImg');
    var thumImg = document.getElementById('thumImg');
    thumImg.onclick = function() {
        modal.style.display = 'block';
        bgImg.src = this.src;
    }
    bgImg.onclick = function() {
        modal.style.display = 'none';
    }

复制

将里面的实现组装成html后，直接测试查看，效果演示如下

180401_IMGPRE1.gif

事实上，它已经达到了我们预期的效果，还有几点不尽如人意。

三．先进的

首先，我希望它是一个真正的弹窗，而不影响现有的布局。一般是通过设置位置来完成的。例如jquery 点击图片放大，我们可以在模态框之外添加另一层以使其

复制

二是弹窗的风格太帅了。我们可以利用之前学过的边框阴影来实现漂亮的弹出效果。

修改后的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;
}

复制

接下来我们看一下演示效果如下：

180401_IMGPRE2.gif

有必要将其变成支持多图像的通用解决方案。这主要是由于点击图像的变化造成的。需要改变前面硬编码的地方。

180401_IMGPRE3.gif

四、源码

最后给出全部源码




 
小灰灰css学习笔记 

#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}
.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    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)}
}
.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

	



    



    
 	 
    
    
    


    var modal = document.getElementById('modal');
    var bgImg = document.getElementById('bgImg');
    function showBgImg(e) {
		modal.style.display = 'block';
		bgImg.src = e.src;
	}
	bgImg.onclick = function() {
		modal.style.display = 'none';
	}

复制

五、其他个人博客：易慧慧博客

基于hexo+githubpages的个人博客jquery 点击图片放大，记录学习和工作的所有博文。欢迎您来参观。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!