jquery - 为 pageX 将一个 div 分成两半

Question

好吧，“拆分”可能不是正确的词，我想要一个 div，如果你的鼠标在左半边执行一个功能，如果你的鼠标在右手边执行相反的功能。

在我在主 div 中设置两个额外的 div 并使用鼠标悬停来实现这一点之前，我需要将两个分隔 div 的 z-index 放在主 div 的顶部。问题是，我需要向主 div 添加一个点击功能，里面有几个图像(它是一个旋转的轮播)。

是否可以划分主 div，以便如果鼠标在一侧，它执行一个操作，而在另一侧使用 pageX 或其他函数执行相反的操作？

Answer 1

这是可能的，而且也不是那么难。
只需获取元素相对于文档的位置，然后从元素宽度的一半中减去该位置，然后将其与 e.pageX 进行比较，如下所示:

$('#test').on('click', function(e) {
    var Dleft = $(this).width() / 2,
        Cleft = e.pageX - $(this).offset().left;

    if (Cleft > Dleft) {
        $(this).html('You clicked the right half');
    }else{
        $(this).html('You clicked the left half');
    }

});

FIDDLE