0

そこで、マウスドラッグに反応する画像フリップブック アニメーションを作成しました。Safari と 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();


});
4

1 に答える 1

0

アニメ化の仕方を見直しました。大きな画像に画像交換を使用しないでください。特定のブラウザで画像がちらつくことがあります。代わりに Ihide()とshow()レイヤーを にしanimateます。

于 2012-07-04T18:38:09.660 に答える