Question

希望能在某些javascript上得到一些帮助，我会被困住。

Q1：JS返回图像高度和边缘

我的布局是位于网格中的较小图像的水平滚动，使用不同的高度百分比和边距来定位。当您单击任何图像时，它们都会扩展到高度：100％和margin：0会清除所有以前的样式，并将其置于简单的大图像布局中。

我的问题是如何添加一个函数，当单击.image-container时，高度和边距将返回到最初在css中设置的方式

JS FIDDLE DEMO（点击任意中心图片）

// GALLERY 100% height
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '?'},900)
        .animate({'margin': '?'},900); 

    });

编辑更新的问题：Q2如何使用更大的图像生成页面大小

现在我的.image-container被设置为一个很大的宽度但是有了响应式图像很难找到正确的宽度，有没有办法找到这个宽度并让它随着点击的增长而增长图像（显示在上面）

.image-container {
display:block;
width:3600px;
height: 75%;
float:left;

position:absolute;
top: 13%;
left: 120px;

z-index: -1;

}

感谢您的帮助！

Answer 1

您需要将原始高度存储在变量中。

查看updated fiddle

var originalheight;
        // GALLERY 100% height
        $('.image-container').click(function(){
            originalheight = $('.image-container img').height();
            $('.image-container img').animate({'height': '100%'},900) 
            .animate({'margin': '0'},900); 

        });

        //REMOVE HEIGHT ?
        $('.image-container').click(function(){
            $('.image-container img').animate({'height': originalheight},900)
            .animate({'margin': '0'},900); 

        });

修改

对以前解决方案中的问题感到抱歉。我没有注意到我不必要地使用click两次。这是使用updated fiddle的更新解决方案。

var originalheight; $('.image-container').click(function () { if (!originalheight) originalheight = $('.image-container img').height(); if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height $('.image-container img').animate({ 'height': '100%' }, 900).animate({ 'margin': '0' }, 900); } else { //REMOVE HEIGHT ? $('.image-container img').animate({ 'height': originalheight }, 900).animate({ 'margin': '0' }, 900); } });

Answer 2

这是我的想法，希望它能起作用：

// Before animation
    var heights = new Array();
    var margins = new Array();
    $('.image-container img').each(function(){
       heights.push($(this).css('height'));
    });
    $('.image-container img').each(function(){
       margins.push($(this).css('margin'));
    });
// 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': heights[$(this).index()]},900)
        .animate({'margin': margins[$(this).index()]},900); 

    });

Answer 3

首先，我建议你使用focusout和blur事件撤消更改，因为你实现'click'事件的方式，第二部分只会被考虑（你擦除了第一次点击实现）。最好的方法是在点击时放大图像，并在点击时重新调整它的大小。

试试这个：

// GALLERY 100% height
$('.image-container')
  .bind('click', function(){
    $('.image-container img').animate({height: '100%'},900) 
    .animate({margin: 0},900);
  })
  .bind('focusout blur', function(){
    $('.image-container img').animate({height: ''},900) 
    .animate({margin: ''},900);
  });

或者更好的是，使用您在点击时定义行为的类，然后再次单击，例如：

<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>

  $('.yourOriginalValues').click(function(){
    $(this).switchClass( "yourOriginalValues", "clickimage", 900 );
  });
  $('.clickimage).click(function(){
    $(this).switchClass( "clickimage", "yourOriginalValues", 900 );
  });

PS。 switchClass方法，是一个jQuery UI功能。

JS改变高度并返回原始CSS高度

3 个答案: