用jq做一个点击图片放大消失

最新推荐文章于 2024-09-11 15:33:18 发布

四川小钢炮

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量302

点赞数

分类专栏：前端文章标签： javascript css html jquery css3

本文链接：https://blog.csdn.net/qq_43248630/article/details/108393548

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用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",'');
        });
    });

    
});

第一次发不太会用将就哈我是个菜鸡大佬勿喷但是欢迎指点谢谢