Question

我可能不应该尝试这样做，但是到目前为止，我已经不想放弃了。我想创建自己的灯箱类型脚本。我可以使用ligthbox类创建一个绝对div，它会覆盖整个页面。然后创建一个固定的img，并在加载时进行动画处理。我也有导航箭头可在照片中移动。当我单击箭头时，所有作品都会接受，它会创建新的关闭X和箭头。我不明白，因为这是通过未附加到箭头功能的动画功能完成的。

我添加了event.stopPropagation（）;箭头功能和动画功能，但这没有用。

启动所有功能的功能。

jQuery(".marks-lightbox img").click( function() {

  var Img = jQuery(this),
      cImg = Img.attr("src"),
      allImg = jQuery(".marks-lightbox img");

  //finding the current img from the available images

  for(i=0; i < allImg.length; i++) {

    if( jQuery(allImg[i]).attr("src") == Img.attr("src") ) {

      lbImgCurrent = i;

    }
  }

  makeLightBox() 

});


function makeLightBox() {

    var bodyHeight = jQuery("body").height(),
        lightbox = jQuery("<div>").addClass("lightbox").css({"width":"100vw","height":bodyHeight}),
        scrollTop = 72,
        lbContainer = jQuery("<div>").addClass("lbContainer"),
        lbImg = jQuery(".marks-lightbox img"),
        imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src"),
        lbClose = jQuery("<span>").addClass("lb-close").text("X");

    jQuery("body").prepend(lightbox);

    lbContainer.appendTo(".lightbox");

    jQuery('<img src="'+ imgSRC +'">').load(function() {

      jQuery(this).appendTo(".lbContainer").css("display","none").addClass("lb-image");

      var w = jQuery(".lb-image").width(),
          h = jQuery(".lb-image").height(),
          lbw = lightbox.width(),
          margin = (lbw - w) /2;

      jQuery(this).appendTo(".lightbox").css({"position":"fixed","display":"block","width":0,"height": 0}).animate({"top":scrollTop,"width":w,"height":h,"margin-left":margin, "margin-right":margin},1000,function(event){

        var lbimg = jQuery(this),
            lbH = lbimg.height() + 63,
            lbLeft = lbimg.offset().left,
            lbW = lbimg.width(),
            larrow = jQuery("<div><</div>").addClass("left-arrow-lb lb-arrow"),
            rarrow = jQuery("<div>></div>").addClass("right-arrow-lb lb-arrow");

        larrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+18});

        rarrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+lbW-90});;

        lbClose.appendTo(".lightbox").css({"position":"fixed","top": lbH,"left": lbLeft+lbW - 18});

      });
    });
}

这是点击功能

jQuery("body").on("click",".left-arrow-lb", function() {
    console.log(jQuery(this));
    var lbImgLength = jQuery(".marks-lightbox img").length,
        lbImg = jQuery(".marks-lightbox img");

    lbImgCurrent = (lbImgCurrent < 1 ) ? lbImgLength : lbImgCurrent -1;

    var imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src");
    console.log(imgSRC);
    jQuery(".lb-image").attr("src",imgSRC);

});

每次单击都会创建一个加载新的img scr并为照片添加动画（出乎意料），并创建新的箭头并关闭x。

Answer 1

我发现它是on（“ load” ...每次加载图像时都在工作。所以我创建了一个var reload并将其设置为true。on（load ...）函数中我说不是true，则返回false。在箭头函数中，将重载设置为false。这样可以防止on（load ...工作重载。）

脚本的传播

1 个答案: