微客导航 » 文章资讯 » Javascript查看大图功能代码实现

Javascript查看大图功能代码实现

2023-07-25 17:41:13 139

功能与实现

点击小图片可以查看大图

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

大图以动画的形式出现

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

代码

html代码





Title

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-keyframeszoom{/*自定义动画*/
from{-webkit-transform:scale(0)}
to{-webkit-transform:scale(1)}
}

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

js代码

functionopen_container(x){
document.getElementById("container").style.display="block";
varstr="";
str="img/"+x+".jpg";
document.getElementById("content_img").src=str;
}
functionclose_container(){
document.getElementById("container").style.display="none";
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Javascript查看大图功能代码实现

热门推荐

随机推荐