Question

我有一些图像，我希望它们在点击时缩放并改变位置（此部分正在工作）然后，如果我点击＆＃34;关闭＆＃34;然后我希望它们缩小并再次单击时返回其原始位置（工作）按钮（部分工作 - ＆＃34;关闭＆＃34;按钮在第一次点击时不会褪色），或者如果我点击屏幕上的任何地方（不知道如何）。

主要问题是当点击的图像回到其原始位置时，没有任何图像可以点击，因此我不能使该功能多次使用。

任何帮助将不胜感激！

jQuery的：

    $(document).ready(function(){

    var itemImages = $('.foo, .bar, .foobar, .barfoo');


    $(itemImages).click(function(){
        $(this).addClass("scaled");
        $(itemImages).addClass("blur");
        $(this).removeClass("blur");
        $(itemImages).off('click');
        $('.close').fadeIn('slow');
        $(this).on('click',itemClicked);

    });
    $('.close').click(function(){
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
    }   
});

CSS：

    .blur {
    -webkit-filter: blur(5px);
    transition: .5s -webkit-filter linear;
}
.scaled {
    -webkit-transform: scale(2.2);
    left: 1300px;
    top: 500px;
    z-index: 3;
}
.close {
    width: 86px;
    height:86px;
    background: url(../images/icons.png) top left;
    position: absolute;
    right: 40px;
    top: 40px;
    display: none;
}
#items img {
    position: absolute;
    transition: all .2s ease-out;
}
.foo {
    left: 94px;
    top: 133px;
    width: 275px;
    height: auto;
}
.bar {
    left: 537px;   
    top: 63px;
    width: 317px;
    height: auto; 
}
.foobar {
    left: 958px;
    top: 86px;
    width: 432px;
    height: auto;
}
.barfoo {
    left: 1556px;
    top: 77px;
    width: 270px;
    height: auto;
}

HTML：

<section id="items" class="fullscreen">
    <div class="close"></div>
    <img class="foo" src="items/image1.png">
    <img class="bar" src="items/image2.png">
    <img class="foobar" src="items/image3.png">
    <img class="barfoo" src="items/image4.png">
</section>

Answer 1

你应该重新绑定click事件，而不是使用on：

$(document).ready(function(){

    var itemImages = $('.foo, .bar, .foobar, .barfoo');

    var setClick = function(){
        $(itemImages).click(function(){
            $(this).addClass("scaled");
            $(itemImages).addClass("blur");
            $(this).removeClass("blur");
            $(itemImages).off('click');
            $('.close').fadeIn('slow');
            $(this).on('click',itemClicked);
        });
    }
    $('.close').click(function(){
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        setClick();
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
    }   
});

Answer 2

问题是$().on();不能像这样工作：$(itemImages).on('click');。我想，你试图扭转$(itemImages).off('click');声明。您需要传递将附加到on函数的事件处理程序或再次使用click函数。因此，最简单的方法是在单独的函数中定义事件处理程序并再次附加它：

＆＃13;

$(document).ready(function () {

    var itemImages = $('.foo, .bar, .foobar, .barfoo');


    $(itemImages).click(itemImages_click);
    $('.close').click(function () {
        $(itemImages).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).on('click');
        $(this).fadeOut('fast');
    });

    function itemClicked() {
        $(this).removeClass("scaled");
        $(itemImages).removeClass("blur");
        $(itemImages).click(itemImages_click);
    }
    
    function itemImages_click(e) {
    $(this).addClass("scaled");
    $(itemImages).addClass("blur");
    $(this).removeClass("blur");
    $(itemImages).off('click');
    $('.close').fadeIn('slow');
    $(this).on('click', itemClicked);
};
});

＆＃13;

    .blur {
        -webkit-filter: blur(5px);
        transition: .5s -webkit-filter linear;
    }
    .scaled {
        -webkit-transform: scale(2.2);
        left: 1300px;
        top: 500px;
        z-index: 3;
    }
    .close {
        width: 86px;
        height:86px;
        background: url(../images/icons.png) top left;
        position: absolute;
        right: 40px;
        top: 40px;
        display: none;
    }
    #items img {
        position: absolute;
        transition: all .2s ease-out;
    }
    .foo {
        left: 94px;
        top: 133px;
        width: 275px;
        height: auto;
    }
    .bar {
        left: 537px;
        top: 63px;
        width: 317px;
        height: auto;
    }
    .foobar {
        left: 958px;
        top: 86px;
        width: 432px;
        height: auto;
    }
    .barfoo {
        left: 1556px;
        top: 77px;
        width: 270px;
        height: auto;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
    <div class="close"></div>
    <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
    <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
    <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
    <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

＆＃13;

Answer 3

您可以执行类似

的操作

$(document).ready(function() {

  var itemImages = $('.foo, .bar, .foobar, .barfoo');


  itemImages.click(function() {
    if ($(this).hasClass('blur')) {
      return;
    }
    if ($(this).hasClass('scaled')) {
      reset();
      return;
    }

    $(this).addClass("scaled");
    itemImages.not(this).addClass("blur");
    $(this).removeClass("blur");
    $('.close').fadeIn('slow');
  });
  $('.close').click(reset);

  function reset() {
    itemImages.removeClass("scaled blur");
    $('.close').fadeOut('fast');
  }
});

.blur {
  -webkit-filter: blur(5px);
  transition: .5s -webkit-filter linear;
}
.scaled {
  -webkit-transform: scale(2.2);
  left: 1300px;
  top: 500px;
  z-index: 3;
}
.close {
  width: 86px;
  height: 86px;
  background: url(../images/icons.png) top left;
  position: absolute;
  right: 40px;
  top: 40px;
  display: none;
}
#items img {
  position: absolute;
  transition: all .2s ease-out;
}
.foo {
  left: 94px;
  top: 133px;
  width: 275px;
  height: auto;
}
.bar {
  left: 537px;
  top: 63px;
  width: 317px;
  height: auto;
}
.foobar {
  left: 958px;
  top: 86px;
  width: 432px;
  height: auto;
}
.barfoo {
  left: 1556px;
  top: 77px;
  width: 270px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
  <div class="close"></div>
  <img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
  <img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
  <img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
  <img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

退出功能，并使功能再次运行

3 个答案: