代码

Css实战训练之图片点击放大(编号5)

字号+ 作者:admin 来源:未知 2019-01-12 08:19

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么实现的呢? 正好学习了下css的基础知识,现在可以来实际的操作一把 1. 思路 首先对页面的结构进

Css实战训练之图片点击放大
I. 背景
非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片
 
那么这个功能是怎么实现的呢? 正好学习了下css的基础知识,现在可以来实际的操作一把
 
1. 思路
首先对页面的结构进行拆分:
 
有一个弹窗,在弹窗中显示大图;且弹窗默认是隐藏的
主页面上可以放置很多图片,并添加点击事件
点击之后,弹窗显示,并展示大图
大图点击以下后,关闭弹窗
 
 
 
<!DOCTYPE html>
<html>
<head>
<title>Css实战训练之图片点击放大</title> 
<style>
#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;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<!-- 先来实现弹窗 -->
<div style='position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)' id='modal'>
<div class='modal' id='modalw'>
    <img id='bgImg' />
</div>
</div>


<!-- 下面则是主页内容,先只给几个图片 -->

<div>
    <img onclick='showBgImg(this)' class='thum-img' 
    src='./ims/1.jpg' />
  <img class='thum-img' src='./ims/1.jpg' onclick='showBgImg(this)'/> 
    <img class='thum-img' src='./ims/1.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='./ims/1.jpg' onclick='showBgImg(this)'/>
    <img class='thum-img' src='./ims/1.jpg' onclick='showBgImg(this)'/>
</div>

<script>
    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';
}
</script>
</body>
</html>


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 鼠标移到图片上,图片自动放大(编号4)

    鼠标移到图片上,图片自动放大(编号4)

    2019-01-12 08:19

网友点评
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读