1

我现在正在为JimmiesAreRustled.com上的一个课程项目建立一个网站，在“操作方法”部分，有四个当前可拖动的谷物图像。

问题在于，当你把它放到大猩猩的嘴里时，第一块谷物（'.c1'）是唯一与滴交互作用的。其他 3 位（.c2、.c3、.c4）根本不起作用。

在那之后，我想知道是否有任何方法可以让谷物碎片一旦掉落就消失？

这是我为它准备的 jQuery 代码：

$(".c1, .c2, .c3, .c4").draggable();

$(".invis1").droppable({
            over: function() {
                    $('.game').hide();
                    $('.game2').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis2").droppable({
            over: function() {
                    $('.game2').hide();
                    $('.game3').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis3").droppable({
            over: function() {
                    $('.game3').hide();
                    $('.game4').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });

$(".invis4").droppable({
            over: function() {
                    $('.game4').hide();
                    $('.game5').show();
                    $('embed').remove();
                    $('body').append('<embed src="../sounds/sound2.mp3" autostart="true" hidden="true" loop="false">');
            }
    });
  • .c1, .c2, .c3, .c4 = 谷物粒
  • .game divs = 谷物掉落后隐藏/加载新图像的新页面
  • .invis divs = 大猩猩嘴上的隐形盒子/用于放置谷物碎片的目标
4

1 回答 1

0

奇怪的是，我认为您的问题是由使用边距定位“谷物”引起的。

尝试这样的事情：

.c1 {
    position: relative;
    top:-100px;
    left:200px;
}
.c2 {
    position: relative;
    top:-200px;
    left:200px;
}
.c3 {
    position: relative;
    top:-200px;
    left:700px;
}
.c4 {
    position: relative;
    top:-100px;
    left:700px;
}

在“吃掉”后隐藏谷物：

$(".c1, .c2, .c3, .c4").draggable({
    start: function (event, ui) {
        $(this).addClass('hide');
    }
});

$(".invis1").droppable({
    tolerance: "touch",
    drop: function () {
        $('.hide').hide();
    }
});

简单的工作示例

注意：我在看到您对页边距的评论之前就开始写这篇文章了……

于 2013-06-09T01:04:13.947 回答