0

所以我制作了一个对鼠标拖动做出反应的图像翻书动画。它在 Safari 和 IE 中运行良好,但在 Firefox 中运行良好。当我拖动鼠标时,交换的图像会闪烁。恐怕以某种方式选择imgordiv会导致闪烁,所以我关闭了任何可选属性。我什至关闭了拖动,只使用了 x 鼠标位置。它仍然在闪烁。渲染或我的代码是内存问题吗?这些是相当大的图像,例如 800 像素 x 500 像素。

(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

我重做了动画的方式。不要将图像交换用于大图像,否则您会在某些浏览器上看到图像闪烁。相反,我hide()show()层到animate.

于 2012-07-04T18:38:09.660 回答