Захват координат мыши на каждом шаге анимации jQuery

Я пытаюсь получить координаты мыши во время анимации jQuery, я делаю это, потому что я работаю над интерактивным плагином, который перемещает фоновое изображение внутри a div от cover css property до 100% его масштаба, когда пользователь переходит элемент.Захват координат мыши на каждом шаге анимации jQuery

Я близок к завершению plug-in, но анимация багги, потому что она работает в последней позиции мыши, запущенной mousemove событием jQuery.

Существует ли какой-то способ избежать проблемы?

Это моя ситуация:

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

Как вы видите, я использую анимацию для вычисления прогрессивного масштабирования фона изображения, и пытаюсь его расчетом с помощью метода последующей мыши, но если я STO перемещения мышь, анимация работает с последними mousemoveevent.pageX и Y положение мыши.

Я сделал это, потому что у меня проблемы с созданием анимационного метода жидкости, если я пытаюсь переписать его непрерывно с помощью мыши.

Должен ли я следовать по-другому, чтобы избежать ошибки?

источник

2012-02-04 vitto

Я просто решить эту проблему с помощью этого простого редактирования в мой код:

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

это устранило поведение багги.

источник

2012-02-04 11:16:07 vitto

простите мою изворотливую математику; но это должно помочь!

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

источник

2012-02-04 11:00:13

Мне очень хотелось бы работать с холстом, теперь я предпочитаю закончить путь к jQuery-подключаемому модулю, который я начал, потому что теперь все готово! – vitto

Захват координат мыши на каждом шаге анимации jQuery

ответ

Смежные вопросы