觸發鼠標移動

Question

我一直在使用我發現的代碼片段來創建一些在屏幕上隨機移動的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)

預先感謝您

Answer 1

可以使用$(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

Answer 2

通過改變jQuery(document).ready(function($){到jQuery(document).mousemove(function($){，你的功能將當鼠標移動而不是頁面加載時啓動。

這裏有一個演示： http://jsfiddle.net/FjM5j/1/