我想在jQuery動畫期間獲取鼠標座標,我這樣做是因爲我正在處理一個交互式插件,它將內部背景圖像一個div
從cover
css屬性到100%
它的規模是當用戶瀏覽元素時。在jQuery動畫的每一步捕獲鼠標座標
我即將完成plug-in
,但動畫是有問題的,因爲它工作在由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'
});
}
正如你看到的,我用動畫來計算背景圖像的逐步擴展,並試圖與後續的鼠標方法計算它,但如果我STO移動鼠標,動畫與最後的mousemove
event.pageX
和Y
鼠標位置一起工作。
我已經這樣做了,因爲如果我試圖用鼠標不斷改寫它,我的動畫方法會變得很流暢。
我應該按照一些不同的方式來避免這個錯誤嗎?
我真的很想和canvas一起工作,因爲現在我優先考慮完成「jQuery插件」的路徑,因爲現在已經完成了! – vitto 2012-02-04 11:32:27