1

我有一个站点，它的“容器”div 是浏览器窗口宽度的 200%，并且溢出是隐藏的。有些信息在容器的左半边（前 100%），有些信息在右半边（后 100%）。我使用一个简单的图标切换在容器的两半之间来回滑动，如下所示：

$('.container').animate({'marginLeft':'-=100%'}, 'slow');

--或--

$('.container').animate({'marginLeft':'+=100%'}, 'slow');

问题是，我需要根据容器的 marginLeft 执行某些事件。

当前半部分可见时，我对获得我想要的事件没有任何问题。但是当 jquery 将容器向左滑动 100%，使后半部分可见时，我无法工作。

经过许多小时的研究，我了解到我不能使用

if ($('.container').css('marginLeft') == '-100%') {
    //do something here

因为警报永远不会以百分比的形式告诉我 marginLeft，所以它总是以精确的像素返回数字。

我的结论是我的“if”语句中需要一个简单的计算，但我不知道如何写一个。

用书面英语应该是：

“如果以像素为单位的marginLeft除以以像素为单位的窗口宽度等于-1，那么请做一些事情......”

有人可以指导我如何创建这个非常基本的 jquery 计算并将其应用于 if 语句吗？

任何帮助将不胜感激。

非常感谢，新年快乐，大卫。

4

2 回答 2

0

我相信一个简单的方法（不需要计算）是让一个变量告诉你天气，你是否在第二部分。我在 JSFiddle 上做了一个小例子，你可以在这里查看：http: //jsfiddle.net/lrojas94/3udk9aj9/

基本思想是这样的：

var click = 1;
$(document).ready(function(){

    $('.percent').click(function(){
        if(click === 1)
        {
            $(this).css('marginLeft','-100%');
            click  =  2;
        }
        else{
            $(this).css('marginLeft','0');
            click = 1;
        }

    })

});

其中 Percent 类是大小为 200% 的 Div。检查小提琴以了解更多信息。

我必须指出，据说全局变量（大多数时候）是个坏主意。但我相信这是一种简单的工作方法，您可以随意使用。希望这能回答你的问题，如果没有，希望我也能从中吸取教训。

于 2015-01-01T02:20:58.563 回答
0

总而言之，第一个面板显示大型投资组合图像，第二个面板显示缩略图网格 - 它们通过单击页脚中的图库图标来回切换。Barmar 先生（我的第一个回复者，上图）引导我放弃了边距切换（谢谢，先生！），无论容器 div 实际在哪里，它只返回一个“0”，以支持绝对定位。在这样做的过程中，我实际上开始接收可用于定位的数字，但我仍然面临将这些数字转换为可预测的东西的问题，因此我可以在 if 语句中使用它们。所以我所做的是创建一个变量，在本例中为“panelIndex”，即容器左侧位置除以浏览器窗口宽度的结果。如果那个数字是“0” 我知道第一个面板是可见的，如果该数字是“-1”，我知道第一个面板已从屏幕左侧滑出，现在第二个面板可见。等等，像这样：

// GALLERY TOGGLE
$(document).ready(function() {
    $('#gallery_icon').click(function() {

    panelIndex = $('.container').position().left / $( window ).width();

    if ($(this).hasClass('off') && panelIndex == 0)
    {
        $(this).switchClass('off', 'on', 0);
        $('.container').animate({'left':'-100%'}, 'slow');
        // DO SOMETHING
    }
    else ($(this).hasClass('on') && panelIndex == -1)
    {
        $(this).switchClass('on', 'off', 0);
        $('.container').animate({'left':'0'}, 'slow');
        // DO SOMETHING ELSE
    }
    });
});

所以，是的......如果你像我一样以百分比工作，你总是可以使用上面的简单方程来为你的条件语句生成可预测的结果。

感谢 Barmar & Niet the Dark Absol 的帮助。

于 2015-01-01T17:15:51.703 回答