브라우저 너비에 따라 자바 스크립트를 죽이거나 실행하십시오.

Question

간단히 말해 브라우저 창이 특정 크기보다 작은 경우에만 스크립트 (이 경우 Flexslider)를 실행하고 싶습니다.

즉

미만 480 픽셀 폭 (크기 조정 발사 나에 하나) - Flexslider을 실행

이상 480 픽셀 폭 (크기 조정 발사 나에 하나) - Flexslider 표시 목록을 죽일 '정적'블록/페이지 요소로 항목

현재로서는 브라우저 너비에 따라 addClass 및 removeClass를 사용하여 (어느 정도까지) 작동하는 다음 코드가 있습니다. 그러나 관련 스크립트를 죽이거나 실행하려면 브라우저를 새로 고쳐야합니다. 아마 짐작 했겠지만 나는 JS 전문가는 아니지만 당신의 아이디어를 듣고 싶어합니다.

HTML :

<div id="foo"> 
     <ul class="slides"> 
     <li><img src="images/image1.jpg" width="320" height="320" alt=""></li> 
     <li><img src="images/image2.jpg" width="320" height="320" alt=""></li> 
     <li><img src="images/image3.jpg" width="320" height="320" alt=""></li> 
     </ul> 
    </div> 

JS :

 
     $(document).ready(function() { 
      var pageWidth = $(window).width(); 
      if (pageWidth <= 480) { 
       $("#foo").addClass('flexslider'); 
        $('.flexslider').flexslider({ 
         animation: "slide", 
         directionNav: true 
        }); 
      } 
     $(window).resize(function() { 
      if ($(window).width() > 480) { 
       $("#foo").removeClass('flexslider'); 
      } 
      }); 
     }); 
    

---

JS - 수정 1

 $(window).resize(function(){ 
     var windowWidth = $(window).width(); 
     if (windowWidth <= 480) { 
      $("#foo").addClass('flexslider'); 
       $('.flexslider').flexslider({ 
        animation: "slide", 
        directionNav: true 
       }); 
     } 
    $(window).resize(function() { 
     if ($(window).width() > 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     }); 
    }); 

,745,151 5,

---

JS - 개정 2

$(window).resize(function() { 
     if ($(window).width() >= 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     if ($(window).width() < 480) { 
      $("#foo").addClass('flexslider'); 
      $('#foo').flexslider({animation: "slide"}); 
     } 
}); 

Answer 1

는 $(document).ready 함수에서

$(window).resize(function() { 
     if ($(window).width() >= 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     if ($(window).width() < 480) { 
      $("#foo").addClass('flexslider'); 
     } 
    }); 

보십시오.

무슨 일이 벌어 지는지는 document.ready가 페이지가로드 될 때만 발생한다는 것입니다. 페이지 크기를 조정 한 후에 window.ready 함수를 실행하려면 document.ready 함수에서 벗어나야합니다.

또한 두 함수에서 동일한 작업을 수행해야합니다. 또는 flexslider 추가 및 제거를 처리하는 별도의 함수가 있고 window.resize 및 document.ready 함수를 호출해야합니다. 두 번째 방법은 아마도 더 좋습니다.

희망이 도움이됩니다.