0
그래서 mousedrag에 반응하는 이미지 플립 북 애니메이션을 만들었습니다. 사파리 & IE에서 잘 작동하지만 Firefox는 작동하지 않습니다. 마우스를 드래그하면 스와핑 이미지가 깜박입니다. 어떻게 든 img 또는 div이 깜박임을 유발하여 선택되어 두려워서 선택 가능한 속성을 해제했습니다. 나는 끌기조차 돌렸고 x-mouse 위치 만 사용했습니다. 여전히 깜박입니다. 렌더링 또는 내 코드의 메모리 문제입니까? 이들은 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();
});