album

Posted 2020-09-07 mudeng007

<style> 

#outerdiv{position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:2;width:100%;height:100%;display:none;}
#innerdiv{position:absolute;}
#innerdiv #bigimg{border:5px solid #222226;display: block;box-shadow: 0 0 30px rgba(4,15,34,.9);border-radius: 4px;}
#outerdiv .prevBtn:after,#outerdiv .prevBtn:before,
#outerdiv .nextBtn:after,#outerdiv .nextBtn:before{content:"";width:0;height:0;border:20px solid transparent;position: absolute;top:50%;cursor: pointer;}
#outerdiv .prevBtn:after,#outerdiv .prevBtn:before{border-right:30px solid #ff5454;left: 20px;}
#outerdiv .nextBtn:after,#outerdiv .nextBtn:before{border-left:30px solid #ff5454;right: 20px;}

</style>

-------------------------------------------

<img class="zone_ad1.jpg" class="imgLi"/>

<img class="zone_ad2.jpg" class="imgLi"/>

<div id="outerdiv">

　　<div class="prevBtn bigBtn" onselectstart="return false"></div>

　　<div id="innerdiv">

　　　　<img src="" id="bigimg">

　　</div>　　

　　<div class="prevBtn bigBtn" onselectstart="return false"></div>

</div>

-----------------------------------------------

/*当有N个相册，每个相册有数量不等的图片*/

$(function(){

　　$(".imgLi").on("click",function(){

　　　　var index=$(this).index(); // 获取点击的第几个相册

　　　　var arr=glovalVue.album[index]; //vue数据绑定相册，获取此时的相册数组

               if(arr.length==1){

　　　　　　$(".bigBtn").hide();

　　　　}else{

　　　　　　$(".bigBtn").show();

　　　　}

　　　　imgSize(arr[0].src); //传递相册第一张图片的src

　　　　imgShow("#outerdiv","#innerdiv"."#bigimg",arr);

　　});

})

/*图片弹窗显示*/

function imgShow(outerdiv,innerdiv,bigimg,arr){

　　var i=0;

　　$(".nextBtn").on("click",function(event)){

　　　　event.stopPropagation();

　　　　i++;

　　　　if(i==arr.length){

　　　　　　i=0;

　　　　}

　　　　imgSize(arr[i].src);

　　});

　　$(".prevBtn").on("click",function(event){

　　　　　event.stopPropagation();

　　　　　i--;

　　　　　if(i<0){

　　　　　　i=arr.length-1;

　　　　}

　　　　imgSize(arr[i].src);　　

　　});

}

function imgSize(src) {
    $("#bigimg").attr("src", src);
    $("<img/>").attr("src", src).load(function () {
        var windowW = $(window).width();
        var windowH = $(window).height();
        var realWidth = this.width;
        var realHeight = this.height;
        var imgWidth, imgHeight;
        var scale = 0.8;

        if (realHeight > windowH * scale) {
            imgHeight = windowH * scale;
            imgWidth = imgHeight / realHeight * realWidth;
            if (imgWidth > windowW * scale) {
                imgWidth = windowW * scale;
            }
        } else if (realWidth > windowW * scale) {
            imgWidth = windowW * scale;
            imgHeight = imgWidth / realWidth * realHeight;
        } else {
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $("#bigimg").css("width", imgWidth);
        var w = (windowW - imgWidth) / 2;
        var h = (windowH - imgHeight) / 2;
        $(innerdiv).css({"top": h, "left": w});
        $(outerdiv).fadeIn("fast");
    });
    $(outerdiv).click(function () {
        $(this).fadeOut("fast");
    });
}