2012-07-02 116 views
0

所以我做了一個圖像翻動畫動畫,對mousedrag作出反應。它在Safari瀏覽器& IE中正常工作,但不支持Firefox。當我拖動鼠標時,交換圖像會閃爍。我恐怕不知何故imgdiv被選中導致閃爍,所以我關閉了任何可選屬性。我甚至轉向了拖動,只是使用了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(); 


}); 

回答

0

我重複了它的動畫方式。不要在大圖像上使用圖像交換,否則會在某些瀏覽器上看到圖像閃爍。而是我hide()show()層到animate