Question

我正在创建一个jquery脚本，根据光标位置垂直平移其容器内的图像。

这就是我所做的：

        $(window).load(function(){
            var lastcalc = 0;
            $(".tn3a-image").mousemove(function(e){
              //var y = e.pageY-$(".tn3a-image").offset().top;
              //var Cnt_h = $(".tn3a-image").height();
              //var Cy = ($(".pan-view").height()-Cnt_h)/Cnt_h;
              var calc = -(($(".pan-view").height()/$(".tn3a-image").height())-1)*(e.pageY-$(".tn3a-image").offset().top)
              if (Math.abs(lastcalc-calc)<=1) return; 
              lastcalc = calc;
              $(".tn3a-full-image").stop(true,true)
                   .animate({ top : calc }, 500, 'linear');
            });
        });

它按预期工作，但表现非常糟糕。虽然我有一个很好的GPU / CPU，但看起来真的很迟钝。我想出了两个解决方案 - 在单个变量（名为'calc'）中进行计算，并使用'.stop（true，true）'。然而，我仍然对此并不满意。与基于Flash的解决方案相比，它看起来非常糟糕。

关于如何优化这个的任何想法？

感谢您的帮助。

Answer 1

以下是一种限制处理程序的简单方法：

var IsPanning = false;
$(window).load(function(){
            var lastcalc = 0;
            $(".tn3a-image").mousemove(function(e){
              if(IsPanning == false){

                  IsPanning= true;
                  var calc = -(($(".pan-view").height()/$(".tn3a-image").height())-1)*(e.pageY-$(".tn3a-image").offset().top)
                  if (Math.abs(lastcalc-calc)<=1) return; 
                  lastcalc = calc;
                  $(".tn3a-full-image").stop(true,true)
                     .animate({ top : calc }, 500, 'linear');
                  });
                  IsPanning = false;
               }
           });

很抱歉，我目前无法检查是否存在任何语法错误，希望它能为您提供这个想法。

Jquery Image pan，糟糕的表现

1 个答案: