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

通过将jQuery(document).ready(function($){更改为jQuery(document).mousemove(function($){，您的功能将在移动鼠标时启动，而不是在加载页面时启动。

这是一个演示： http://jsfiddle.net/FjM5j/1/

Answer 2

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

触发鼠标移动

2 个答案: