Question

我使用名为“left”和“right”的2个div制作了一个旋转木马，将mousemove事件放在它们上面。我想让它上下移动，所以我创建了一个“顶部”和“底部”，并注意到我无法使它们结合起来以光标的方式运行。

因此我想到了容器中的特定区域（即我的容器div的上半部分），而不是在触发特定方向的内部创建div，这样（我认为）我可以完全触发所有这些事件。然而，经过几个小时的研究，我找不到办法。

我该怎么办？这是代码：http://jsfiddle.net/pool4/vL5g3/3/

var x=0, 
    y=0,
    rateX=0,
    rateY=0,
    maxspeed=10;
var backdrop = $('.backdrop');

$('.directionx', backdrop).mousemove(function(e){
    var $this = $(this);
    var left = $this.is('.left');
    var right = $this.is('.right');

    if (left){
        var w = $this.width();
        rateX = (w - e.pageX - $this.offset().left + 1)/w;
    }
    else if (right){
        var w = $this.width();
        rateX = -(e.pageX - $this.offset().left + 1)/w;
    }
});
$('.directiony', backdrop).mousemove(function(e){
    var $this = $(this);
    var top = $this.is('.top');
    var bottom = $this.is('.bottom');  

    if (top){
        var h = $this.height();
        rateY = (h - e.pageY - $this.offset().top + 1)/h;
    }
    else if (bottom) {
        var h = $this.height();
        rateY = -(e.pageY - $this.offset().top + 1)/h;
    }
});


backdrop.hover(
    function(){
        var scroller = setInterval( moveBackdrop, 30 );
        $(this).data('scroller', scroller);
    },
    function(){
        var scroller = $(this).data('scroller');
        clearInterval( scroller );
    }
);   

function moveBackdrop(){
    x += maxspeed * rateX;
    y += maxspeed * rateY;
    var newpos = x+'px '+y+'px';
    backdrop.css('background-position',newpos);
}

Answer 1

你的问题是控制向上和向下移动的div被放置在左右控制的div上，因此后者不会接收到mousemove事件。鼠标事件不会通过图层传播，即使它们是透明的。我改变了你的代码和CSS，所以每个div都在一个角落里。为了简化操作，我使用了data- *属性，因此每个div控制的方向都以声明方式设置，而无需更改代码。你会发现代码更简单（并且可以更简化）。

顺便说一下，你可以通过控制光标的位置（到div中心的顶部，右边，左边或底部）来实现这个额外的div。

backdrop.on('mousemove', '.dir', function(e){
    var $this = $(this);
    var direction = $(e.target).attr('data-direction');
    var left = direction.indexOf('left') > - 1;
    var right = direction.indexOf('right') > - 1;
    var top = direction.indexOf('up') > - 1;
    var bottom = direction.indexOf('down') > - 1;

    if (left){
        var w = $this.width();
        rateX = (w - e.pageX - $this.offset().left + 1)/w;
    }
    else if (right){
        var w = $this.width();
        rateX = -(e.pageX - $this.offset().left + 1)/w;
    }

    if (top){
        var h = $this.height();
        rateY = (h - e.pageY - $this.offset().top + 1)/h;
    }
    else if (bottom) {
        var h = $this.height();
        rateY = -(e.pageY - $this.offset().top + 1)/h;
    }
});

我已更新您的fiddle。

编辑在这个新的fiddle我没有额外的div：

var w = backdrop.width() / 2;
var h = backdrop.height() / 2;
var center = {
    x: backdrop.offset().left + backdrop.width() / 2,
    y: backdrop.offset().top + backdrop.height() / 2
};

backdrop.on('mousemove', function(e){   
    var offsetX = e.pageX - center.x;
    var offsetY = e.pageY - center.y;

    rateX = -offsetX / w;
    rateY = -offsetY / h;
});

backdrop.hover(
    function(){
        var scroller = $(this).data('scroller');
        if (!scroller) {
            scroller = setInterval( moveBackdrop, 30 );
            $(this).data('scroller', scroller);
        }
    },
    function(){
        var scroller = $(this).data('scroller');
        if (scroller) {
            clearInterval( scroller );
            $(this).data('scroller', null);
        }
    }
);

如您所见，mousmove处理程序相当简单。

Answer 2

为避免儿童丢失事件的问题，可以只使用一个。

从4个子div到第一个

的第一个HTML

<div class="backdrop">
    <div class="direction"></div>
</div>
<div id="pos"></div>

下一步在鼠标移动中找到你的相对位置

//Get Relative Position
    var relX = e.pageX - $this.offset().left;
    var relY = e.pageY - $this.offset().top;

获取相对位置作为宽度的百分比，并将其50％置于负方向

var w = $this.width();
rateX = ((relX / w) - 0.5) * -1;

var h = $this.height();
rateY = ((relY / h) - 0.5) * -1;

Fiddle

选择div的特定区域

2 个答案: