0
所以我做了一個圖像翻動畫動畫,對mousedrag作出反應。它在Safari瀏覽器& IE中正常工作,但不支持Firefox。當我拖動鼠標時,交換圖像會閃爍。我恐怕不知何故img
或div
被選中導致閃爍,所以我關閉了任何可選屬性。我甚至轉向了拖動,只是使用了X鼠標的位置。它仍然閃爍。這是渲染還是我的代碼的內存問題?這些是相當大的圖像像800px x 500px。jQuery圖像交換動畫Firefox閃爍
(function($){
$.fn.setframe = function(frame){
return this.each(function(){
var $image = $(this);
function imageName(frame){
return 'images/inx'+frame+'.png';
}
$image.attr('src', imageName(frame));
});
};
})(jQuery);
$(document).ready(function(){
var dragDistance = 15;
var originalX = null;
var frame = 1;
$('.cot').mousedown(function(e) {
e.preventDefault();
originalX = e.pageX - frame * dragDistance;
$(document).mousemove(function(e) {
e.preventDefault();
frame = Math.floor(((e.pageX - originalX)/dragDistance) % 35);
if(frame > 0) {
$('img.inx').setframe(frame);
} else {
$('img.inx').setframe(Math.abs(frame+ 35));
}
});
});
$(this).mouseup(function() {
$(document).unbind('mousemove');
});
}
$('img').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
$('.cot').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
$('img').disableSelection();
$('.cot').disableSelection();
});