触发鼠标移动

我一直在使用我发现的代码片段来创建一些在屏幕上随机移动的div。然而，这会在一段时间后变得相当混乱，因此我希望它在鼠标/光标移动时只触发它们的移动。触发鼠标移动

我的jQuery技巧很苗条，所以一些指导将非常感谢！

我的代码：

jQuery(document).ready(function($){ 
    animateElem('.a'); 
    animateElem('.b'); 
    animateElem('.c'); 
    animateElem('.d'); 

}); 

function makeNewPosition(){ 

// Get viewport dimensions (remove the dimension of the div) 
var h = jQuery(window).height() - 50; 
var w = jQuery(window).width() - 50; 

var nh = Math.floor(Math.random() * h); 
var nw = Math.floor(Math.random() * w); 

return [nh,nw];  

} 

function animateElem(elem){ 
var newq = makeNewPosition(); 
var oldq = jQuery('.a').offset(); 
var speed = calcSpeed([oldq.top, oldq.left], newq); 

jQuery(elem).animate({ top: newq[0], left: newq[1] }, speed, function(){ 
    animateElem(elem);   
}); 

}; 

function calcSpeed(prev, next) { 

var x = Math.abs(prev[1] - next[1]); 
var y = Math.abs(prev[0] - next[0]); 

var greatest = x > y ? x : y; 

var speedModifier = 0.2; 

var speed = Math.ceil(greatest/speedModifier); 

return speed; 

}

我的jsfiddle：http://jsfiddle.net/FjM5j/

原帖在这里：how to get a div to randomly move around a page (using jQuery or CSS)

预先感谢您

来源

2014-05-02 kallekillen

可以使用$(document).mousemove()。还可以使用.stop()停止以前的动画调用方法

function animateElem(elem){ 
    var newq = makeNewPosition(); 
    var oldq = jQuery('.a').offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 

    jQuery(elem).stop().animate({ top: newq[0], left: newq[1] }, speed, function(){ 
    // animateElem(elem);   
    }); 

}; 

$(document).mousemove(function(event) { 
     animateElem('.a'); 
     animateElem('.b'); 
     animateElem('.c'); 
     animateElem('.d'); 

});

Demo

来源

2014-05-02 12:02:41

这正是我一直在寻找，谢谢！ – kallekillen