0

我正在创建一个 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 的解决方案相比，它看起来非常糟糕。

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

谢谢你的帮助。

4

1 回答 1

0

这是限制处理程序的简单方法：

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

抱歉，我目前无法检查是否有任何语法错误，希望它能给您提供建议。

于 2013-11-01T14:49:54.737 回答