Question

所以我做了一个图片动画片动画，对mousedrag做出反应。它在Safari＆amp; IE但不是Firefox。当我拖动鼠标时，交换图像会闪烁。我担心选择img或div导致闪烁，所以我关闭了任何可选属性。我甚至转过拖动，只是使用了x-mouse位置。它仍然闪烁着。这是渲染或我的代码的内存问题吗？这些是相当大的图像，如800px x 500px。

(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();


});

Answer 1

我重新设定动画的方式。不要对大图像使用图像交换，否则您会在某些浏览器上看到图像闪烁。相反，我hide()和show()层到animate。

jQuery图像交换动画Firefox闪烁

1 个答案: