Javascript查看大图功能代码实现

功能与实现

点击小图片可以查看大图

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

大图以动画的形式出现

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

代码

html代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<link rel="stylesheet" href="style.css" rel="external nofollow" type="text/css">

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >

</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";

}

以上是 Javascript查看大图功能代码实现 的全部内容, 来源链接: utcz.com/z/349340.html

回到顶部