jQueryアニメーション中にマウス座標を取得しようとしていますが、私は対話型プラグインを使用しています。 a div
cover
cssプロパティから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場合マウスは、最後のmousemove
event.pageX
とY
マウス位置で動作します。
これはマウスで連続的に書き直すとアニメーションメソッドの作成に問題があるため、これを実行しました。
バグを避けるために別の方法を実行する必要がありますか?
私は本当にキャンバスで作業したいと思っています。今は終わったので、私が始めた 'jQueryプラグイン'のパスを完成させることをお勧めします! – vitto