Question

我试图找到一个代码，让div随机地从光标中逃脱，但我找不到任何代码。也许我不知道如何搜索，也许它很容易，但我的英语不足以解决这种情况。

我想要一个在父div中随机转移光标的div，你能帮助我吗？

非常感谢！

Answer 1

希望它会有所帮助：

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 2

随机化但动画：

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

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

});

JSFiddle demo 干杯：D

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

<强> 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。

更新

这样做是为了避免盒子离开窗户。

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

我们可以通过在函数本身中使用div宽度进行推广。

Answer 5

这已在另一个问题中得到解答，这是创建的示例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?

希望这有帮助。

如何制作一个随机退出鼠标光标的div？

5 个答案: