javascript - 随着鼠标位置的变化改变背景颜色

Question

我想知道是否可以借助鼠标坐标设置背景颜色。

我拥有的是:

我有一个可拖动的 DIV-A 和一些其他可放置的 div。

我需要的是:

每当我的 DIV-A 越过它们时，我需要在我的页面上突出显示其他可放置的 div。我有的是鼠标坐标，是否可以使用 jquery 在鼠标坐标的基础上应用 css。

Answer 1

类似下面的内容可能会起作用。您可能需要处理窗口的 scrollLeft 和 scrollTop 才能使其完美。你可能想要 throttle和 memoize (如果放置位置不变)它也是。

此外，还可以通过缓存 offset()、仅在需要时绑定(bind) mousemove 以及调整 each 来调整更多性能code> 循环以利用优化循环(例如 for(var i=droppables.length;i>-1;){var self = droppables.eq(--i);...}) .

另请注意，这只会在鼠标经过 div 时改变它们的颜色...当可拖动对象经过它们时不一定会改变...这会使事情变得有点复杂，但下面的函数应该会发送给您正确的方向。

$(document).mousemove(function(e){
     // this should be throttled...
     var x = e.pageX,
         y = e.pageY;
     // this loop could be optimized...
     $("div.droppables").each(function(){
         // these vars could be memoized...
         var self = $(this),
             divL = self.offset().left,
             divT = self.offset().top,
             divR = self.width() + divL,
             divB = self.height() + divT;
         // if the MOUSE coords are between the droppable's coords
         // change the background color
         if(x >= divL && x <= divR && y >= divT && y <= divB){
              self.css("background", "red");
         }
         else{
              // reset the background color
              self.css("background", "");   
         }
     });
});