是否需要在每次鼠标悬停时使图像动画离开光标位置？ [英] Need to animate an image to move away from cursor postion on each mouseover?

问题描述

我试图通过改变它在鼠标悬停时的位置来设置框的图像动画。

I'm trying to animate an image of a box by changing it's position on mouseover.

我可以让它移动一次，但我需要设置它每次有人鼠标悬停在图像上时它会移动。我想让用户追逐屏幕周围的框。

I can get it to move once but I need to set it up so that it moves everytime someone mouses over the image. I want to make the users 'chase' the box around the screen.

优选地，动画会循环播放，以便用户永远无法捕捉图像？

Preferably the animation would loop so that a user can never catch the image ?

以下是我目前所拥有的一个例子，以下是我的jQuery代码：

Here is an example of what I have so far, and below is my jQuery code:

$(document).ready(function() {
    $('#img').mouseover(function() {
        $(this).animate({
            left: '500px'
        });
    });
});

万分感谢！

推荐答案

这是示例。它涵盖了我的基本知识。

Here is an example. It covers basics I guess.

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' });
    });
});

这篇关于是否需要在每次鼠标悬停时使图像动画离开光标位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！