jQuery响应式网站APP操作用户向导插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常实用的jQuery和CSS3响应式网站APP操作用户向导插件。通过该用户向导插件，可以一步步的向用户介绍你的网站或APP的主要功能和使用方法。

当你新制作了一个APP应用，免费提供给用户试用的时候，肯定不希望用户抱怨不知道如何去使用。这个用户向导可以一步步的向用户介绍APP的使用方法，对用户来说也是一种非常好的用户体验。下面是该插件的一个GIF动画。

用户向导动画演示

使用方法

HTML结构

该用户向导的HTML结构使用的是一个无序列表：每一个列表项包含一个.cd-more-info元素，该元素用于放置移动手机版本的标题，简介和图片。另外还有一个<span>是小圆点指示器。

<body>
  <button id="cd-tour-trigger">Start tour</button>
 
  <ul class="cd-tour-wrapper">
    <li class="cd-single-step">
      <span>Step 1</span>
 
      <div class="cd-more-info bottom">
        <h2>Step Number 1</h2>
        <p><!--  description here  --></p>
        <img src="img/step-1.png" alt="step 1">
      </div>
    </li> <!-- .cd-single-step -->
 
    <!-- other steps here -->
  </ul> <!-- .cd-tour-wrapper -->
 
</body>

注意，.cd-nav（每个步骤中的前后导航）元素不是直接写在HTML中的，而是后面通过jQuery来插入到文档中。

.cd-app-screen是用于创建一个虚拟的APP显示界面的背景，实际使用的时候可以不需要这个元素。

CSS样式

在移动手机上，该用户向导是以每台窗口的形式打开的，平滑缩放的效果是通过在列表元素.cd-single-step上使用CSS3 transition来进行缩放。每一个步骤都会显示一个标题，一个描述信息和一张图片。这些代码非常简单，可以查看源文件了解更多信息。

在桌面设备上（浏览器视口大于1100像素），列表的每一个.cd-single-step都被设置了一个定位，注意定位使用的是百分比单位。<span>元素用于制作闪烁的小圆点指示器。闪烁的效果是使用列表项的::after伪元素并对它们的box-shadow进行动画。

@media only screen and (min-width: 1100px) {
  .cd-single-step {
    position: absolute;
    border-radius: 50%;
    visibility: hidden;
    transition: visibility 0s 0.4s;
  }
  .cd-single-step:nth-of-type(1) {
    /* set tour points positions */
    bottom: 40%;
    right: 30%;
  }
 
  /*define here all the other list items position values*/
 
  .cd-single-step > span {
    /* dot indicator - visible on desktop version only */
    width: 10px;
    height: 10px;
    background: #ff962c;
    transform: scale(0);
    transition: transform 0.4s;
    /* replace text with background images */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  .cd-single-step .cd-more-info {
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s;
  }
  .cd-single-step.is-selected {
    /* visible step */
    visibility: visible;
    transition: visibility 0s 0s;
  }
  .cd-single-step.is-selected > span {
    transform: scale(1);
  }
  .cd-single-step.is-selected::after {
    animation: cd-pulse 2s infinite;
    animation-delay: 0.5s;
  }
  .cd-single-step.is-selected .cd-more-info {
    opacity: 1;
  }
}
 
@keyframes cd-pulse {
  0% {
    box-shadow: 0 0 0 0 #ff962c;
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 150, 44, 0);
  }
}