목차
resize() 예제 - 창 크기 변동 자동 감지 resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발 resize() 정의 resize() 구문 resize() 예제 - fullpage.js 반응형 적용 (화면크기 따라 끄기/실행)
resize() 예제 - 창 크기 변동 자동 감지
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){ // 창 크기 변경 자동 감지
$("span").text(x += 1);
});
});
</script>
<p>창크기 <span>0</span> 번 변경</p>
결과보기
resize() 예제 - 창 크기 변동 자동 감지 + 수동 촉발
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var x = 0;
$(document).ready(function(){
$(window).resize(function(){ // 창 크기 변동 자동 감지
$("span").text( x+= 1);
});
$("button").click(function(){ // 창 크기 변동 수동 촉발
$(window).resize();
});
});
</script>
<p>창크기 <span>0</span> 번 변경</p>
<button>클릭</button>
결과보기
resize() 정의
resize 이벤트는 브라우저 창 크기 변경될 때 이벤트 발생.
① resize 이벤트 촉발.
② resize 이벤트 발생 시 실행할 함수 부착.
resize() 구문
resize 이벤트 촉발
$(selector).resize()
resize 이벤트에 함수 부착.
$(selector).resize(function )
[매개변수]
function
선택. resize 이벤트 발생 때 실행할 함수 지정.
resize() 예제 - fullpage.js 반응형 적용 (화면크기 따라 끄기/실행)
<script>
...
fullpageActivate();
// 너비 변경 돼야 아래 코드 작동
$(window).resize(function() {
if($(this).width () <= 768) {
fullpage_api.destroy('all');
} else {
fullpageActivate();
}
});
// 태블릿으로 바로 접속한 사람 경우 아래 코드 필요.
$(window).trigger ('resize');
</script>
PS. 관련 좌표
