選擇div的特定區域

Question

我用一個名爲「left」和「right」的2個div將鼠標移動事件放在他們身上，製作了一個傳送帶。我也想讓它上下移動，所以我創建了一個「頂部」和「底部」，並注意到我不能讓它們合併在一起，以實現光標前進的方式。

因此，我認爲針對容器中的特定區域（即我的容器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被放置在控制左，右的，因此後者永遠不要接受mousemove事件。鼠標事件不會通過圖層傳播，即使它們是透明的。我改變了你的代碼和CSS，所以每個div都在其中一個角落。爲了方便起見，我使用了data- *屬性，這樣每個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

爲了避免兒童失去活動的問題可以使用一個。

首先HTML 4孩子的div只是一個

<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