JQuery和Javascript來平移圖像

Question

我想通過以下tutorial來實現對圖像的平移效果。但是，它不工作，我認爲這可能是由於引用了JavaScript的way。我想收到聲像效果的圖像保持靜態，不泛像demo.

這是我到目前爲止已經試過：

我有以下的javascript（自提教程，除了在類名的修改）：moesia-child-01/scripts/pan.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> 

在functions.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'); 

在我的主題header.php中，我加入這行只是wp_head之前（）：

<?php wp_enqueue_script("jquery"); ?> 

而此行只是wp_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'); 

更新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 

我從上pan.js文件中的這些404錯誤想通了，它一直在尋找父主題文件夾（moesia）代替javascript文件的子主題文件夾（moesia-child-01）。

我寧願能夠保留我的腳本在兒童主題文件夾 - 如何做到這一點？

但是，爲了測試這一點，我現在已經將腳本文件夾複製到父主題文件夾（現在有一個副本moesia/scripts/pan.js） - 注意：並不是可取的！

我現在看到我有pan.js語法錯誤，但無法看到它是來自：

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

最終結果

基於從另一個SO用戶的建議，我刪除了標籤。起初，當在Wordpress之外測試代碼時，這導致了jquery未定義的錯誤。

<?php wp_enqueue_script("jquery"); ?> 

Answer 1

你並不需要添加腳本標籤：但是，使用WordPress的，因爲我曾在header.php中已經提到的jQuery這樣當代碼現在的作品。註冊將訣竅。但是，您需要爲註冊添加依賴項。您的腳本依賴於JQuery，因此將其添加爲依賴項：

wp_register_script('pan-script', get_template_directory_uri() . '/scripts/pan.js', ['jquery']);