javascript Slip.js는 전체 화면 슬라이딩 모바일 webpage_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 15:29:501370검색
Slip.js를 사용하면 HTML과 CSS만 작성하면 됩니다. 로직이 간단하다면 JS 코드 한 줄로 완료할 수 있어 개발 효율성이 크게 향상됩니다. 자랑하지 않으려면 30분도 채 안 되어 위의 데모를 작성했습니다.
구체적으로 어떻게 하나요? 예를 들어 다음과 같은 요구사항이 있습니다.
4페이지로 구성되어 있으며 각 페이지에는 그림이 있고 손가락을 슬라이드할 때마다 전체 화면이 전환됩니다.
먼저 HTML을 살펴보세요.
<!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div> </div> </body>
JS 마지막 모습:
var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);
해설:
- 슬립(Slip): 전 세계에 공개되는 메소드.slip.js만 소개하면 이런 실용적이고 멋진 메소드를 얻을 수 있습니다.
- 컨테이너: 슬라이드되는 컨테이너에는 각 슬라이딩 페이지가 포함됩니다.
- 'y': 페이지 슬라이딩 방향을 'x'에 전달할 수도 있습니다.
- webapp: 페이지를 전체 화면 슬라이딩 페이지로 표시하도록 설정하는 방법입니다.
- 페이지: 페이지 요소 목록입니다.
코드 한 줄이면 모든 작업이 완료됩니다.
Slip(document.getElementById('container'), 'y').webapp();
위의 코드 줄은 페이지를 정의하지 않는다는 것을 알 수 있습니다.
webapp 메소드가 매개변수를 전달하지 않으면 Slip은 컨테이너의 직접 하위 요소(아들 요소)를 페이지로 가져옵니다.
이제 상상할 수 없을 정도로 간단하고 빠른 전체화면 슬라이딩 웹페이지가 완성됩니다. 저는 30분 정도 걸리지만, 당신은 10분 안에 할 수 있을 것입니다.
물론입니다. Slip.js에는 더 많은 강력한 기능이 있습니다. 예를 들어 페이지가 슬라이드될 때 수행할 작업을 정의할 수 있습니다. PM은 사용자가 작업을 너무 빨리 완료하는 것을 보고 매우 흥미로운 요구 사항을 추가했습니다.
페이지가 마지막 페이지로 슬라이드되면 새로고침하세요. . .이 작업을 완료하려면 몇 줄의 코드만 추가하면 됩니다.
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
위 내용은 이 기사의 전체 내용입니다. 이 기사는 단지 시작일 뿐입니다. 앞으로는 더 포괄적이고 흥미로운 기사가 기다리고 있을 것입니다. .
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.