使用jQuery和Java脚本来平移图像

时间：2016-02-16 作者：user25976

我试图通过以下方式在图像上实现平移效果tutorial. 然而，它不起作用，我认为这可能是由于way 正在引用javascript。我希望接收平移效果的图像保持静态，不喜欢平移demo.

这就是我迄今为止所尝试的：

我在：moesia-child-01/scripts/pan中有以下javascript（完全复制自上述教程，除了修改了类名）。js公司

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- JS -->
<script>
  (function($){

    $(document).ready(function(){
      //call imagePanning fn when DOM is ready
      $(".pan img").imagePanning();
    });

    //imagePanning fn
    $.fn.imagePanning=function(){
      var init="center",
        speed=800, //animation/tween speed
        //custom js tween
        _tweenTo=function(el,prop,to,duration,easing,overwrite){
          if(!el._mTween){el._mTween={top:{},left:{}};}
          var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style,_request,tobj=el._mTween[prop];
          if(prop==="left"){from=el.offsetLeft;}
          var diff=to-from;
          if(overwrite!=="none"){_cancelTween();}
          _startTween();
          function _step(){
            progress=_getTime()-startTime;
            _tween();
            if(progress>=tobj.time){
              tobj.time=(progress>tobj.time) ? progress+_delay-(progress-tobj.time) : progress+_delay-1;
              if(tobj.time<progress+1){tobj.time=progress+1;}
            }
            if(tobj.time<duration){tobj.id=_request(_step);}
          }
          function _tween(){
            if(duration>0){
              tobj.currVal=_ease(tobj.time,from,diff,duration,easing);
              elStyle[prop]=Math.round(tobj.currVal)+"px";
            }else{
              elStyle[prop]=to+"px";
            }
          }
          function _startTween(){
            _delay=1000/60;
            tobj.time=progress+_delay;
            _request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
            tobj.id=_request(_step);
          }
          function _cancelTween(){
            if(tobj.id==null){return;}
            if(!window.requestAnimationFrame){clearTimeout(tobj.id);
            }else{window.cancelAnimationFrame(tobj.id);}
            tobj.id=null;
          }
          function _ease(t,b,c,d,type){
            var ts=(t/=d)*t,tc=ts*t;
            return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
          }
          function _getTime(){
            if(window.performance && window.performance.now){
              return window.performance.now();
            }else{
              if(window.performance && window.performance.webkitNow){
                return window.performance.webkitNow();
              }else{
                if(Date.now){return Date.now();}else{return new Date().getTime();}
              }
            }
          }
        };
      return this.each(function(){
        var $this=$(this),timer,dest;
        if($this.data("imagePanning")) return;
        $this.data("imagePanning",1)
          //create markup
          .wrap("<div class=\'img-pan-container\' />")
          .after("<div class=\'resize\' style=\'position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1\'><iframe style=\'width:100%; height:0; border:0; visibility:visible; margin:0\' /><iframe style=\'width:0; height:100%; border:0; visibility:visible; margin:0\' /></div>")
          //image loaded fn
          .one("load",function(){
            setTimeout(function(){ $this.addClass("loaded").trigger("mousemove",1); },1);
          }).each(function(){ //run load fn even if cached
            if(this.complete) $(this).load();
          })
          //panning fn
          .parent().on("mousemove touchmove MSPointerMove pointermove",function(e,p){
            var cont=$(this);
            e.preventDefault();
            var contH=cont.height(),contW=cont.width(),
              isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1,
              evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e,
              coords=[
                !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0,
                !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0
              ];
            dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))];
          })
          //resize fn
          .find(".resize iframe").each(function(){
            $(this.contentWindow || this).on("resize",function(){
              $this.trigger("mousemove",1);
            });
          });
        //panning animation 60FPS
        if(timer) clearInterval(timer);
        timer=setInterval(function(){
          _tweenTo($this[0],"top",-dest[0],speed);
          _tweenTo($this[0],"left",-dest[1],speed);
        },16.6);
      });
    }

  })(jQuery);
</script>
在函数中。php中，我添加了以下函数来注册主题脚本并将脚本排队：

function my_js_scripts()
{
    // Register the script like this for a theme:
    wp_register_script( \'pan-script\', get_template_directory_uri() . \'/scripts/pan.js\' );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( \'pan-script\' );
}
add_action( \'wp_enqueue_scripts\', \'my_js_scripts\' );
在我的主题标题中。php，我在wp\\u head（）之前添加了这一行：

<?php wp_enqueue_script("jquery"); ?>
wp\\u head（）后面的这一行：

<script type="text/javascript" src="/scripts/pan.js"></script>

UPDATE

我已经将jquery参数添加到脚本注册表中，但它仍然不起作用。

function my_js_scripts()
    {
        // Register the script like this for a theme:
        wp_register_script( \'pan-script\', get_template_directory_uri() . \'/scripts/pan.js\', [\'jquery\'] );

        // For either a plugin or a theme, you can then enqueue the script:
        wp_enqueue_script( \'pan-script\' );
    }
    add_action( \'wp_enqueue_scripts\', \'my_js_scripts\' );

UPDATE 2

<我有这些Chrome开发者控制台错误：

GET http://localhost:8888/mysite/wp-content/themes/moesia/scripts/pan.js?ver=4.4.2  ?page_id=15:143
GET http://localhost:8888/scripts/pan.js  ?page_id=15:193
我从锅上的404个错误中找出了答案。js文件，它在父主题文件夹（moesia）中查找javascript文件，而不是在子主题文件夹（moesia-child-01）中查找javascript文件。

我希望能够将脚本保存在子主题文件夹中--如何做到这一点？

然而，为了测试这一点，我现在已经将scripts文件夹复制到父主题文件夹（moesia/scripts/pan.js中现在有一个副本）。

现在我发现我在pan上有一个语法错误。js，但看不到其来源：

pan.js?ver=4.4.2:2 Uncaught SyntaxError: Unexpected token <

1 个回复
SO网友:user25976

我必须克服两个问题才能解决这个问题。

404错误是由于我注册脚本的方式造成的。它指向父主题文件夹，而我保存了。js文件到子主题文件夹。目前，我已经在父主题文件夹中放置了一个副本，并正在寻找将其注册到子主题的正确方法。

一旦浏览器能够找到。js文件，我得到了上面提到的语法错误，因为我在的开头包含了。js文件。删除所有标记并只保留javascript代码，并引用wordpress的jquery后，代码就像一个魔咒。

标签： jquery   javascript   小码农  

相关推荐

如何使用两个不同文件向jQuery AJAX调用发送php变量

我需要从一个php文件（page.php）向另一个jquery文件（sender.js）中的Ajax调用发送一个私人电子邮件地址。此电子邮件地址必须对用户/或网站不可见，直到用户从wp\\U mail获得自动响应，它必须允许用户答复组织。此电子邮件地址因客户想要联系的组织而异（数百个）。我必须在表单之前从组织获取电子邮件地址，因为它是由javascript生成的。（generated\\u mail.js）发件人。js在页面的标题中被很好地调用。php我在（page.php）中尝试了这段代码——一个组织在