Jquery plugins 捕捉jQuery动画中每一步的鼠标坐标_Jquery Plugins_Jquery Animate_Mousemove_Mouse Coordinates

Jquery plugins 捕捉jQuery动画中每一步的鼠标坐标

jquery-plugins

Jquery plugins 捕捉jQuery动画中每一步的鼠标坐标,jquery-plugins,jquery-animate,mousemove,mouse-coordinates,Jquery Plugins,Jquery Animate,Mousemove,Mouse Coordinates,我试图在jQuery动画中获取鼠标坐标，之所以这样做是因为我正在开发一个交互式插件，当用户浏览元素时，它会将div中的背景图像从covercss属性移动到其比例的100% 我即将完成插件，但动画有问题，因为它在jQuery的mousemove事件触发的鼠标的最后位置工作有没有办法避免这个问题这就是我的情况： $(settings.selector).hover(function (e) { $(this).bind('mousemove', setFollowMouse); }, f

我试图在jQuery动画中获取鼠标坐标，之所以这样做是因为我正在开发一个交互式插件，当用户浏览元素时，它会将div中的背景图像从covercss属性移动到其比例的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鼠标位置一起工作

我之所以这样做是因为如果我试图用鼠标连续重写动画方法“使动画成为流体”，我会遇到问题

我应该采取不同的方法来避免这个错误吗？

请原谅我的数学错误；但这应该有帮助

<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>

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

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

这已经消除了错误行为。

我真的很想使用canvas，因为现在我更愿意完成我启动的jQuery插件的路径，因为现在已经完成了！