用jq写一个图片放大和消失的插件
这是HTML代码这是css代码这是jq代码
这是HTML代码
<body>
<div id="box">
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/1.jpg" alt="">
<figcaption>二狗子
</figcaption>
</figure>
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/2.jpg" alt="">
<figcaption>茂茂
</figcaption>
</figure>
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/3.jpg" alt="">
<figcaption>彦
</figcaption>
</figure>
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/4.jpg" alt="">
<figcaption>天空
</figcaption>
</figure>
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/6.jpg" alt="">
<figcaption>王富贵
</figcaption>
</figure>
<img class="bgImg"src="">
<figure class="lightbox-item">
<img src="./img/5.jpg" alt="">
<figcaption>夕阳
</figcaption>
</figure>
</div>
</body>
这是css代码
body{
margin: 0
;
text-align: center
;
}
#box{
width: 100%
;
height: 800px
;
margin: 50px
;
}
img{
width: 500px
;
height: 350px
;
}
.lightbox-item{
width: 500px
;
height: 350px
;
float: left
;
cursor: pointer
;
text-align: center
;
overflow: hidden
;
position: relative
;
}
figcaption{
position: absolute
;
color: yellow
;
font-size: 32px
;
left: 45%
;
top: 45%
;
}
figcaption:hover{
border:2px solid white
;
}
.fillbg {
background-color: rgba(0, 0, 0, 0.6
);
bottom: 0
;
height: 100%
;
left: 0
;
opacity: 0
;
position: fixed
;
right: 0
;
top: 0
;
width: 100%
;
z-index: 1100
;
display:none
;
}
.fillbg-active {
opacity: 1
;
display:block
;
}
.bgImg{
max-width: 100%
;
max-height: 100%
;
position: fixed
;
display: none
;
}
这是jq代码
$(function(){
// var newImg;
var clientH=$(window).height();
var clientW=$(window).width();
var w = '800';//遮罩图片的宽
var h = '500';//遮罩图片的高
$(document).ready(function(){
$(".lightbox-item").bind("click", function(){
//绑定事件
$('.bgImg').css('display','block');
//点击后隐藏遮罩
newImg = $(this).find('img').attr('src');
//获取当前的图片
// console.log(newImg);
$("body").append('<div class="fillbg"></div>');
//插入遮罩
$(".fillbg").addClass("fillbg-active");
//添加类名
$('.bgImg').css({'width': w+"px",'height': h+"px",'top':(clientH-h)/2+"px",'left':(clientW-w)/2+"px",'z-index':1101});
$('.bgImg').attr("src",newImg);
});
$(".bgImg").bind("click", function(){
$(".fill-input").removeClass("fill-input-active");
setTimeout(function(){
$(".fillbg-active").removeClass("fillbg-active");
$(".fillbg").remove();
},300);
$('.bgImg').css({'width': '0px','height': '0px'});
$('.bgImg').attr("src",'');
});
});
});
第一次发 不太会用 将就哈 我是个菜鸡大佬勿喷 但是欢迎指点 谢谢
