需要对图像进行动画处理以在每次鼠标悬停时从光标位置移开？

Posted 2023-05-08

【中文标题】需要对图像进行动画处理以在每次鼠标悬停时从光标位置移开？

【英文标题】：Need to animate an image to move away from cursor postion on each mouseover?

【发布时间】：2012-01-16 06:49:46

【问题描述】：

我正在尝试通过更改鼠标悬停时的位置来为框的图像设置动画。

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

最好让动画循环播放，这样用户就永远无法捕捉到图像？

这里是an example of what I have so far，下面是我的jQuery代码：

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

谢谢一百万！

【问题讨论】：

哦，这是最终版本：ccad.aoifeodwyer.com/truth

【参考方案1】：

这是example。我猜它涵盖了基础知识。

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

【讨论】：

...这不应该让我开心这么久。

这个小提琴会让它飞回原来的位置：jsfiddle.net/atNva/196