如何使 div 从鼠标光标中随机逃脱？

Question

我试图找到使 div 从光标中随机转义的代码，但我找不到任何代码。也许我不知道如何搜索，也许它很容易，但我的英语不够好，无法解决这种情况。

我想要一个 div 它在父 div 中随机从游标中逃脱，你能帮我吗？

非常感谢！

Answer 1

这已在另一个问题中得到解答，这里是创建的示例 http://jsfiddle.net/karalamalar/atNva/。我相信这就是您想要的正确吗？

jQuery(function($) {
    $('#img').mouseover(function() {
        var dWidth = $(document).width() - 100, // 100 = image width
            dHeight = $(document).height() - 100, // 100 = image height
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});

这是另一个问题：Need to animate an image to move away from cursor postion on each mouseover?

希望对您有所帮助。

Answer 2

希望对您有所帮助：

HTML

<div id="runner">
</div>

CSS

#runner {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: red;
    left: 100px;
    top: 100px;
}

JS

$("#runner").on('mouseover', function(){
    var offset = $(this).offset();
    var goX = Math.random() < 0.5 ? -1 : 1;
    var goY = Math.random() < 0.5 ? -1 : 1;
    $(this).css('top', offset.top + 20 * goY);
    $(this).css('left', offset.left + 20 * goX);
});

https://jsfiddle.net/3hLp6myj/

Answer 3

不久前我们把这个当成一个笑话来做的，很简单：

$('button').hover(function() {
    $(this).text("Can't touch this!");
    $(this).css('top', Math.random()*500 + 'px').css('left', Math.random()*600 + 'px');
});

Fiddle example

Answer 4

随机但也动画 :

$("#move").mouseenter(function () {

    $(this).animate({
        top: Math.random() * 300
    }, 100);
    $(this).animate({
        left: Math.random() * 300
    }, 100);

});

JSFiddle demo 干杯 :D

Answer 5

HTML

<div class="touchMeNot"></div>

jQuery

$('.touchMeNot').on('mouseenter',function(e){
    var maxX = $(window).width() - $(this).width();
    var maxY = $(window).height() - $(this).height();
    $(this).css({
        'left':getRandomInt(0, maxX),
        'top':getRandomInt(0, maxY)
    });
});
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

CSS

.touchMeNot{
    position:absolute;
    border: 1px solid red;
    height:50px;
    width:50px;
}

这里是 fiddle.

更新

这样做是为了避免盒子从 window 中溢出。

var maxX = $(window).width() - $(this).width();
var maxY = $(window).height() - $(this).height();

我们可以通过在函数本身中使用 div 宽度来概括。

如何使 div 从鼠标光标中随机逃脱？

How to make a div which escapes from mouse cursor randomly?

html

javascript

css

jquery

jquery-animate