[关闭]
@xiaoyixy 2017-09-06T07:55:41.000000Z 字数 3846 阅读 1042

pageSwitcher

README


Getting Started

Preparation

This widget requires the enable of JavaScript

To use this widget in your project, using following folders/files:

  1. [images] *.jpg | *.png | *.gif...
  2. [script] mainpage[.min].js | required
  3. [style] reset[.min].css | required or defined yourself
  4. mainpage[.min].css | required
  1. <link href="style/reset[.min].css" rel="stylesheet">
  2. <link href="style/mainpage[.min].css" rel="stylesheet">
  3. <script src="script/mainpage[.min].js"></script>

Usage

mainpage.html is a demo web page

1. Create a container with page list(data-page-index and data-page-type attributes required)

  1. <!-- Page Switcher S -->
  2. <div class="main-container">
  3. <!-- Loading page(optional) -->
  4. <div class="page-loading">
  5. <div class="loading-img"></div>
  6. </div>
  7. <!-- Page container -->
  8. <div class="page-container" data-page-type="0" data-page-id="0">
  9. <!-- Arrow next -->
  10. <span><img src="images/next.png" alt="next" width="20" height="20"></span>
  11. <!-- PageA type = 0 -->
  12. <div class="page page-a" data-page-type="0" data-page-id="0">
  13. <!-- Page background container -->
  14. <div class="page-bg"></div>
  15. <div class="page-welcome">
  16. <img src="images/welcome.png" alt="欢迎进入">
  17. </div>
  18. <div class="page-button buttonA">
  19. <a href="#"><img src="images/start.png" alt="开始参观"></a>
  20. </div>
  21. </div>
  22. <!-- PageB type = 1 -->
  23. <div class="page page-b" data-page-type="1" data-page-id="1">
  24. <div class="page-bg page-bg-b"></div>
  25. <div class="page-text page-text-b">
  26. <span>
  27. RyougiChan<br>
  28. RyougiChan<br>
  29. RyougiChan<br>
  30. RyougiChan
  31. </span>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- Page Switcher E -->

2. Create a Page Switcher

  1. var pages = document.querySelectorAll('.page');
  2. // Create page switcher
  3. Campus.widget.pageSwitcher(pages);
  4. // Create response boxes
  5. Campus.widget.responseBoxAuto({
  6. width: 750,
  7. height: 1334
  8. }, [
  9. '.page-welcome', '.buttonA', '.buttonB', '.buttonC', '.buttonD', '.buttonE', '.page-logo', '.page-qrcode', '.qrcode'
  10. ]);

FAQ

Q: Those parameters' meaning in Campus.widget.responseBoxAuto function?

Eeee... Read the Docs guide in mainpage.js.

Q: How does this demo perform on mobile devices' browser?

In my test result, my demo performed well on chrome, firefox, safari, IE11.

Q: Develop experience

At the very start, my demo performed well with chrome and firefox. The JavaScript run in its way well. But where run it in IOS environment, all cracked! There are serveral bugs and its solution:
- window.getComputedStyle(element[, pseudoElt]) function.
As description in the MDN docs, this method should have been preform well with Chrome, Edge, Firefox(Gecko)[Mobile], IE9+, WP7 Mango, Opera[Mobile], Safari[Mobile]. However, it isn't go with its right way in safari! According to WebKit Bugzilla, this is a bug with safari - getComputedStyle returns percentage values for left / right / top / bottom. To solve this bug, using this instead.

  1. ele.offsetLeft / window.offsetWidth - ele.offsetLeft - ele.offsetWidth / ele.offsetTop / window.offsetHeight - ele.offsetTop - ele.offsetHeight
  1. function preload(images, callback) {
  2. for (var i = 0; i < images.length; i++) {
  3. srcs[i] = new Image();
  4. srcs[i].src = images[i];
  5. srcs[images.length - 1].onload = function () {
  6. callback();
  7. }
  8. }
  9. }

Instead, this work.

  1. function preload(images, callback) {
  2. var imgCount = 0;
  3. for (var i = 0; i < images.length; i++) {
  4. srcs[i] = new Image();
  5. srcs[i].src = images[i];
  6. srcs[i].onload = function () {
  7. if (++imgCount == images.length) {
  8. callback();
  9. }
  10. }
  11. }
  12. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注