需要为图像设置动画以在每次鼠标悬停时远离光标位置？

发布于 2024-12-20 10:06:41 字数 421 浏览 1 评论 0原文

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

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

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

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

万分感谢！

原文

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 ?

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

Thanks a million!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

紫南 2024-12-27 10:06:41

这是一个示例。我想它涵盖了基础知识。

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

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

回复收藏 0 原文

~没有更多了~