引导页页面制作

关于引导页制作要点：

1、计算定位
2、利用无限大的 border 属性

    border-radius: 50%;
    border: 10000px solid rgba(0, 0, 0, .7);

具体js:

guide.js
注意点：
1、js中有需要在html中的扣洞处的class名称
2、图片名称需要按照guideTypes里面的名称来定义

(function() {
  'use strict';

  var $ = window.jQuery;
    // 图片路径
  var UPLOAD_FOLDER = 'upload/';
  var guideTypes = 'follow details contact menus actions'.split(' ');

  // preload guide image
  $.each(guideTypes, function(_, type) {
    new Image().src = UPLOAD_FOLDER + 'guide-for-' + type + '.png';
  });

    // 展示指引
  function showGuide() {
        // 背景图不给滚动
    function disableScroll() {
      $('html, body')
        .scrollTop(0)
        .addClass('with-guide')
        .on('touchmove', false);
    }
        // 背景图可滚动
    function enableScroll() {
      $('html, body')
        .removeClass('with-guide')
        .off('touchmove', false);
    }
    disableScroll();
    var body = $('body');

    var html = [];
        // 指引页的长度
    var len = guideTypes.length;
        
    $.each(guideTypes, function(_, type) {
      html.push([
        '<div class="guide guide-for-' + type + '" data-type="' + type + '">',
          '<div class="guide-for"></div>',
          '<div class="guide-main">',
            '<img class="guide-img" src="' + UPLOAD_FOLDER + 'guide-for-' + type + '.png">',
            '<button class="guide-btn" type="button"></button>',
          '</div>',
        '</div>'
      ].join(''));
    });

    var wrap = $('<div class="guide-wrap">' + html.join('') + '</div>').appendTo(body);
    var guides = $('.guide', wrap);
    var win = $(window);

    var posfuncs = [];

    guides.each(function(index) {
      var type = $(this).data('type');
      var frame = $('.guide-for', this);
      var main = $('.guide-main', this);
      // var btn = $('.guide-btn', this);

      if (type === 'follow') {
        var followBtn = $('#js-follow-btn');

        posfuncs[index] = function() {
          var pos = followBtn.offset();
          var width = followBtn.width();
          var height = followBtn.height();
          frame.css({
            left: pos.left + width / 2,
            top: pos.top + height / 2,
            width: width * 1.2,
            height: width * 1.2
          });
          main.css({
            top: pos.top + height / 2
          });
        };
      } else if (type === 'details') {
        var details = $('.office-intro');
        posfuncs[index] = function() {
          var height = details.height();
          var pos = details.offset();
          frame.css({
            top: pos.top + height / 2,
            left: '50%',
            width: height + 10,
            height: height + 10
          });
          main.css({
            top: pos.top + height
          });
        };
      } else if (type === 'contact') {
        var navLink = $('.address-nav-link');
        var phoneLink = $('.office-concat-dial-link');
        posfuncs[index] = function() {
          var navPos = navLink.offset();
          var phonePos = phoneLink.offset();

          var height = phonePos.top + phoneLink.height() - navPos.top;
          var width = Math.max(navLink.width(), phoneLink.width());

          frame.css({
            top: navPos.top + height / 2,
            left: navPos.left + width / 2,
            width: width + 15,
            height: height + 30
          });
          main.css({
            top: navPos.top + height / 2
          });
        };
      } else if (type === 'menus') {
        var menus = $('.index-menus');

        posfuncs[index] = function() {
          var pos = menus.offset();
          var height = menus.height();
          var width = menus.width();

          frame.css({
            top: pos.top + height / 2,
            left: pos.left + width / 2,
            width: width - 10,
            height: height
          });

          main.css({
            top: pos.top
          });
        };
      } else if (type === 'actions') {
        var actions = $('.action-bar > .action-bar');
        posfuncs[index] = function() {
          var pos = actions.offset();
          var height = actions.height();
          var width = actions.width();

          frame.css({
            top: pos.top + height / 2,
            left: pos.left + width / 2,
            width: width - 10,
            height: height
          });

          main.css({
            top: pos.top
          });
        };
      }
    });

    function calcPos() {
      $.each(posfuncs, function(_, posfunc) {
        posfunc();
      });
    }

    win.on('resize load', calcPos).trigger('resize');

    wrap.on('click', '.guide-btn', function() {
      var guide = $(this).parents('.guide');
      var index = guide.index();
      if (index === len - 1) {
        wrap.css({
          display: 'none'
        });
        enableScroll();
        win.off('resize load', calcPos)
      } else {
        guide.css({
          display: 'none'
        });
        guide.next().css({
          display: 'block'
        });
      }
    });

    guides.eq(0).css({display: 'block'});
  }

  $(showGuide);
})();

.guide {
  position: absolute;
  left: 0;
  right: 0;
  display: none;
}

.guide-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  overflow: hidden;
}

.guide-for {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 10000px solid rgba(0, 0, 0, .7);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.guide-for::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px dashed rgba(0, 0, 0, .7);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: inherit;
  border-radius: inherit;
}

.guide-main {
  position: absolute;
  left: 0;
  right: 0;
}

.guide-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;
}

.guide-btn {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 34.13333333%;
  max-width: 120px;
}

.guide-btn::before {
  content: "";
  display: block;
  height: 0;
  padding-top: 33.59375%;
  background: url(../images/guide/guide-btn-next.png);
  -webkit-background-size: 100% 100%;
  background-size: 100%;
}

.guide:last-of-type .guide-btn::before {
  background-image: url(../images/guide/guide-btn-done.png);
}

.guide-for-follow .guide-for::before {
  border-color: #fff;
}

.guide-for-follow .guide-main {
  padding-top: 1rem;
}

.guide-for-follow .guide-img {
  margin-bottom: 2rem;
}

.guide-for-details .guide-for {
  margin-left: -20px;
}

.guide-for-details .guide-for::before {
  border-color: #fff;
}

.guide-for-details .guide-main {
  margin-top: -30px;
}

.guide-for-details .guide-img {
  margin-bottom: 2rem;
}

.guide-for-contact .guide-for,
.guide-for-menus .guide-for,
.guide-for-actions .guide-for {
  -webkit-border-radius: 10015px;
  border-radius: 10015px;
}

.guide-for-contact .guide-for::before,
.guide-for-menus .guide-for::before,
.guide-for-actions .guide-for::before {
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

.guide-for-contact .guide-main {
  margin-top: -40px;
}

.guide-for-contact .guide-img {
  margin-bottom: 1rem;
}

.guide-for-menus .guide-main {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.guide-for-menus .guide-btn {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
}

.guide-for-actions .guide-main {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  padding: 0 1rem;
}

.guide-for-actions .guide-btn {
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}