Capturing the mouse coordinates on every step of a jQuery animation

StackOverflow https://stackoverflow.com/questions/9140367

質問

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?

役に立ちましたか？

解決 2

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.

他のヒント

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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top