为pageX拆分一半的div

时间:2013-06-25 01:32:55

标签: jquery css

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

在我在主div中设置两个额外的div并使用mouseover来实现这一点之前,我需要将两个div div的z-index放在主div的顶部。问题是,我需要在主div中添加一个click函数,里面有几个图像(它是一个旋转的轮播)。

是否可以划分主div,以便如果鼠标位于一侧,则使用pageX或其他功能执行一个操作,而另一侧则相反?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

我认为你不能根据元素中的鼠标位置调用不同的处理程序。但是您的处理程序可以传递包含鼠标位置的event object,因此您可以进行快速比较以确定鼠标当前所在的一半并相应地分支您的代码。