javascript实例_查看大图

目录

JavaScript+css实例——查看大图

写这个实例，js挺简单的，尝试去写css，错误百出，low的不像话，不过还是挺有成就感的。

功能与实现

  • 点击小图片可以查看大图

    实现就是把大图放置在顶层（z-index大于当前页面的）,并且还可以加一些额外的比如透明度什么的。

  • 大图以动画的形式出现

    动画就是css动画样式了，可以自定义动画，将图片一点点变大，发挥想象了。

代码

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
<div class="row">
    <div class="col" onclick="open_container(1)">
        <img src="img/1.jpg" class="img">
    </div>
    <div class="col" onclick="open_container(2)">
        <img src="img/2.jpg" class="img">
    </div>
    <div class="col" onclick="open_container(3)">
        <img src="img/3.jpg" class="img">
    </div>
    <div class="col" onclick="open_container(4)">
        <img src="img/4.jpg" class="img">
    </div>
</div>
<div class="container" id="container">
    <div class="close" id="close" onclick="close_container()">
        <i class="fa fa-close" style="font-size:130px;color:white;"></i>
    </div>

    <div class="container_content">
        <img id="content_img"  class="content_img" src="img/1.jpg">
    </div>
</div>
</body>
<script type="text/javascript" src="show.js"></script>
</html>

css代码

.row{
    margin:auto;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.col{
    float: left;
    width: 20%;
}
img {
    margin-bottom: -4px;
    width:100%;
    height: auto;
}
.close{
    position:absolute;
    top:30px;
    right:30px;
}

.container{
    display:none;
    position:fixed;
    z-index:1;/*设置层叠顺序：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    padding-top:100px;/*放置关闭按钮*/
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    overflow: auto; /*--溢出的情况*/
    opacity:0.85;/*透明*/
    background-color: black;
}

.container_content{
    position: relative;
    background-color: black;
    margin: auto;
    width: 90%;
    max-width: 1200px;
}
 
.content_img{
    width:150%;
    height: auto;
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {/*自定义动画*/
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {/*自定义动画*/
    from {transform:scale(0)}
    to {transform:scale(1)}
}

js代码

function open_container(x){
    document.getElementById("container").style.display="block";
    var str="";
    str="img/"+x+".jpg";
    document.getElementById("content_img").src=str;
}
function close_container(){
    document.getElementById("container").style.display="none";
}
posted @ 2020-05-06 22:15  凌轹VF  阅读(374)  评论(0)  编辑  收藏  举报