捕获 jQuery 动画每一步的鼠标坐标

发布于 2025-01-02 17:57:15 字数 2172 浏览 2 评论 0原文

我正在尝试在 jQuery 动画期间获取鼠标坐标，我这样做是因为我正在开发一个交互式插件，该插件将背景图像从 cover 移动到 div 内当用户滑过元素时，将css 属性缩放到其比例的100%。

我即将完成插件，但动画有问题，因为它在 jQuery 的 mousemove 事件触发的鼠标的最后位置上工作。

是否存在某种方法可以避免该问题？

这是我的情况：

$(settings.selector).hover(function (e) {
    $(this).bind('mousemove', setFollowMouse);
}, function () {
    $(this).unbind('mousemove', setFollowMouse);
    zoomOut();
});

var setFollowMouse = function (e) {
    var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};
    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
    settings.bg.zooming_in = true;
    zoomIn(e, o);
    } else {
        followMouse(e, o);
    }
}

var zoomIn = function (e, o) {

    $({scale:settings.bg.min_perc}).animate ({
        scale:100
    },{
        easing:settings.zoom_in.easing,
        duration:settings.zoom_in.duration,
        step:function () {
            settings.bg.current_scale = this.scale;
            followMouse(e, o);
        },
        complete:function () {
            settings.bg.current_scale = 100;
            settings.bg.zooming_in = false;
            followMouse(e, o);
        }
    });
}

var followMouse = function (e, o) {

    var m_x = e.pageX - o.offsetLeft;
    var m_y = e.pageY - o.offsetTop;

    settings.bg.perc_pos_x = ((m_x * 100) / (a_w - bg_w)) + '%';
    settings.bg.perc_pos_y = ((m_y * 100) / (a_h - bg_h)) + '%';

    var bg_w = getScalePercent(settings.bg.width, settings.bg.current_scale);
    var a_w = settings.container.width;

    var bg_h = getScalePercent(settings.bg.height, settings.bg.current_scale);
    var a_h = settings.container.height;

    var bpx = - (bg_w - a_w) * m_x / a_w;
    var bpy = - (bg_h - a_h) * m_y / a_h;

    $(settings.selector).css({
        backgroundPosition:bpx + 'px ' + bpy + 'px'
        ,backgroundSize:bg_w + 'px ' + bg_h + 'px'
    });
}

如您所见，我使用动画来计算背景图像的渐进缩放，并尝试使用跟随鼠标方法来计算它，但是如果我停止移动鼠标，则动画将使用最后一个 mousemove event.pageX 和 Y 鼠标位置。

我这样做是因为如果我尝试用鼠标连续重写它，我会遇到使动画方法流畅的问题。

我应该采取一些不同的方式来避免该错误吗？

原文

I'm trying to get the mouse coordinates during a jQuery animation, I'm doing this because I'm working on an interactive plug-in which moves the background image inside a div from covercss property to 100% of it's scale when the user go over the element.

I'm near to completing the plug-in but the animation is buggy because it work on the last position of the mouse fired by mousemove event of jQuery.

Does exists some way to avoid the problem?

This is my situation:

$(settings.selector).hover(function (e) {
    $(this).bind('mousemove', setFollowMouse);
}, function () {
    $(this).unbind('mousemove', setFollowMouse);
    zoomOut();
});

var setFollowMouse = function (e) {
    var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};
    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
    settings.bg.zooming_in = true;
    zoomIn(e, o);
    } else {
        followMouse(e, o);
    }
}

var zoomIn = function (e, o) {

    $({scale:settings.bg.min_perc}).animate ({
        scale:100
    },{
        easing:settings.zoom_in.easing,
        duration:settings.zoom_in.duration,
        step:function () {
            settings.bg.current_scale = this.scale;
            followMouse(e, o);
        },
        complete:function () {
            settings.bg.current_scale = 100;
            settings.bg.zooming_in = false;
            followMouse(e, o);
        }
    });
}

var followMouse = function (e, o) {

    var m_x = e.pageX - o.offsetLeft;
    var m_y = e.pageY - o.offsetTop;

    settings.bg.perc_pos_x = ((m_x * 100) / (a_w - bg_w)) + '%';
    settings.bg.perc_pos_y = ((m_y * 100) / (a_h - bg_h)) + '%';

    var bg_w = getScalePercent(settings.bg.width, settings.bg.current_scale);
    var a_w = settings.container.width;

    var bg_h = getScalePercent(settings.bg.height, settings.bg.current_scale);
    var a_h = settings.container.height;

    var bpx = - (bg_w - a_w) * m_x / a_w;
    var bpy = - (bg_h - a_h) * m_y / a_h;

    $(settings.selector).css({
        backgroundPosition:bpx + 'px ' + bpy + 'px'
        ,backgroundSize:bg_w + 'px ' + bg_h + 'px'
    });
}

As you see, I use animation to calculate the progressive scaling of the background-image, and trying to calculating it with the follow mouse method, but if I sto moving the mouse, the animation works with the last mousemove event.pageX and Y mouse position.

I've done this because I have problems with make animation method fluid if I trying to rewrite it continuously by with the mouse.

Should I follow some different way to avoid the bug?

分享到QQ

分享到微博

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

发布评论

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

狠疯拽 2025-01-09 17:57:15

原谅我的数学不好；但这应该有帮助！

<html>
    <head>
        <script type="text/javascript" charset="utf-8">
          window.onload = function () {
                var img = new Image();
                img.src = 'http://wallpapers.free-review.net/wallpapers/23/Autumn_Theme_-_Windows_7_Backgrounds.jpg';

                var canvas = document.getElementById("canvas1");
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.addEventListener('mousemove', onMouseMove, false);

                var ctx = canvas.getContext("2d");
                var scale = 0.9;

                var scaledwidth = canvas.width * scale;
                var scaledheight = canvas.height * scale;

                var scaledcenterX = scaledwidth /2;
                var scaledcenterY = scaledheight /2;

                var animloop = setInterval(function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, scaledwidth, scaledheight, canvas.width - scaledcenterX, canvas.height - scaledcenterY, 0, 0, canvas.width, canvas.height);
                }, .01);

                function onMouseMove(e) {
                    mouseX = e.clientX - canvas.offsetLeft;
                    mouseY = e.clientY - canvas.offsetTop;
                    scale = mouseX/1000;
                    scaledwidth = canvas.width * scale;
                    scaledheight = canvas.height * scale;                    
                }

            };

        </script>
        <style>
            body {
                background: #001;
                background-size: cover;
                overflow: hidden;
            }
            #canvas1 {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                margin: 0;
                height: 100% auto;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas1"></canvas>
    </body>
</html>

forgive my dodgy math; but this should help!

<html>
    <head>
        <script type="text/javascript" charset="utf-8">
          window.onload = function () {
                var img = new Image();
                img.src = 'http://wallpapers.free-review.net/wallpapers/23/Autumn_Theme_-_Windows_7_Backgrounds.jpg';

                var canvas = document.getElementById("canvas1");
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.addEventListener('mousemove', onMouseMove, false);

                var ctx = canvas.getContext("2d");
                var scale = 0.9;

                var scaledwidth = canvas.width * scale;
                var scaledheight = canvas.height * scale;

                var scaledcenterX = scaledwidth /2;
                var scaledcenterY = scaledheight /2;

                var animloop = setInterval(function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, scaledwidth, scaledheight, canvas.width - scaledcenterX, canvas.height - scaledcenterY, 0, 0, canvas.width, canvas.height);
                }, .01);

                function onMouseMove(e) {
                    mouseX = e.clientX - canvas.offsetLeft;
                    mouseY = e.clientY - canvas.offsetTop;
                    scale = mouseX/1000;
                    scaledwidth = canvas.width * scale;
                    scaledheight = canvas.height * scale;                    
                }

            };

        </script>
        <style>
            body {
                background: #001;
                background-size: cover;
                overflow: hidden;
            }
            #canvas1 {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                margin: 0;
                height: 100% auto;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas1"></canvas>
    </body>
</html>

回复收藏 0 原文

说好的呢 2025-01-09 17:57:15

我刚刚通过对代码的简单编辑解决了问题：

var setFollowMouse = function (e) {

    settings.mouse.x = e.pageX - this.offsetLeft;
    settings.mouse.y = e.pageY - this.offsetTop;

    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
        settings.bg.zooming_in = true;
        zoomIn();
    } else {
        followMouse();
    }
}

旧代码：

var setFollowMouse = function (e) {

    var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};

    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
        settings.bg.zooming_in = true;
        zoomIn(e, o);
    } else {
        followMouse(e, o);
    }
}

这已经消除了错误行为。

I've just solved the problem with this simple edit to my code:

var setFollowMouse = function (e) {

    settings.mouse.x = e.pageX - this.offsetLeft;
    settings.mouse.y = e.pageY - this.offsetTop;

    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
        settings.bg.zooming_in = true;
        zoomIn();
    } else {
        followMouse();
    }
}

the old one:

var setFollowMouse = function (e) {

    var o = {offsetLeft:this.offsetLeft, offsetTop:this.offsetTop};

    if (!settings.bg.zooming_in && settings.bg.current_scale != 100) {
        settings.bg.zooming_in = true;
        zoomIn(e, o);
    } else {
        followMouse(e, o);
    }
}

this has removed the buggy behavior.

回复收藏 0 原文

~没有更多了~