> 웹 프론트엔드 > JS 튜토리얼 > jquery 플러그인 jquery.viewport.js에 대한 자세한 설명

jquery 플러그인 jquery.viewport.js에 대한 자세한 설명

小云云
풀어 주다: 2017-12-29 09:57:44
원래의
2071명이 탐색했습니다.

이 글은 주로 jquery 플러그인 jquery.viewport.js를 배우고 사용하는 방법에 대한 자세한 설명을 소개합니다. 관심 있는 분들은 참고하시면 됩니다.

소개

Viewport는 요소를 위한 간단한 jQuery 플러그인 시각적 창 내부 및 외부에서 간단한 요소 감지를 위해 사용자 정의 의사 선택기와 핸들러를 추가합니다.

사용방법


<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
로그인 후 복사

Method


$( ":in-viewport" );
$( ":above-the-viewport" );
$( ":below-the-viewport" );
$( ":left-of-viewport" );
$( ":right-of-viewport" );
$( ":partly-above-the-viewport" );
$( ":partly-below-the-viewport" );
$( ":partly-left-of-viewport" );
$( ":partly-right-of-viewport" );
$( ":have-scroll" );
로그인 후 복사


노란색 부분이 화면에서 벗어난 후 복귀 버튼 표시


  var wodBackButton = function () {
    //元素在屏幕左侧显示返回按钮
    $("#wodsHome:left-of-screen").each(function () {
      $(&#39;#wodBackButton&#39;).removeClass(&#39;hide&#39;);
      return;
    });
    //元素在屏幕显示区域隐藏返回按钮
    $("#wodsHome:in-viewport").each(function () {
      $(&#39;#wodBackButton&#39;).addClass(&#39;hide&#39;);
      return;
    });
  }

  $(&#39;#mediaContainer&#39;).bind("scroll", function (event) {
    wodBackButton();
  });

  wodBackButton();
로그인 후 복사

요약

이 플러그인을 사용하면 개발을 위한 화면 영역과 화면 밖 영역을 쉽고 편리하게 얻을 수 있습니다.

관련 권장사항:

HTML5 개발에서 뷰포트의 화면 적응

뷰포트 속성을 공유하여 모바일 단말기에서 수직 화면 및 수평 화면 글꼴이 재설정되는 문제를 해결하세요.

뷰포트 매개변수 소개 HTML5 및 사용 방법

위 내용은 jquery 플러그인 jquery.viewport.js에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿