2012-07-02 93 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