这款jQuery和css3网站操作提示向导插件界面十分简洁，提示框可以关闭，关闭后变为一个按钮。每个步骤可以通过“next”按钮来查看。

HTML

<div class='container'>
  <h1>Guided tour tooltip</h1>
  <span class='close'></span>
  <div class='slider-container'>
    <div class='slider-turn'>
      <p>Guided tour tooltip inspired by Jonathan Moreira</p>
      <p>
        Dribbble shot visible at
        <a href='#' target='_blank' title='Dribbble shot'>this link</a>
      </p>
      <p>Codepen by Yoann Helin</p>
      <p>
        <a href='#' target='_blank' title='Twitter'>Twitter : @YoannHELIN</a>
        <br>
        <a href='#' target='_blank' title='Book'>Book : Yoannhelin.fr</a>
      </p>
      <p>Thank you !</p>
    </div>
  </div>
  <div class='bottom'>
    <div class='step'>
      <span></span>
      <ul>
        <li data-num='1'></li>
        <li data-num='2'></li>
        <li data-num='3'></li>
        <li data-num='4'></li>
        <li data-num='5'></li>
      </ul>
    </div>
    <button class='btn'>Next</button>
  </div>
</div>
<button class='open'>
  Open
</button>
                

JAVASCRIPT

$(document).ready(function () {
  var nbP = $('.container p').length;
  var w = parseInt($('.container p').css("width"));
  var max = (nbP - 1) * w;
  $("ul li[data-num='1']").addClass('active');
  $('.step span').html('Step 1');
  
  $('body').on('click','.btn', function(){
    var margL = parseInt($('.slider-turn').css('margin-left'));
    var modulo = margL%w;
    if (-margL < max="" &&="" modulo="=" 0)="" {="" margl="" -="w;" $('.slider-turn').animate({="" 'margin-left':margl="" },300);="" $('ul="" li.active').addclass('true').removeclass('active');="" var="" x="-margL/w" +1;="" $('ul="" li[data-num="'+x+'" ]').addclass('active');="" $('.step="" span').html("step="" "+x);="" }="" else="" {}="" });="" $('body').on('click','.close',function(){="" $('.container').animate({="" 'opacity':0="" },600);="" $('.container').animate({="" 'top':-1200="" },="" {="" duration:="" 2300,="" queue:="" false="" });="" $('.open').animate({="" 'top':'50%'="" });="" });="" $('body').on('click','.open',function()="" {="" $('.open').animate({="" 'top':-1000="" });="" $('.container').animate({="" 'opacity':1="" },400);="" $('.container').animate({="" 'top':'50%'="" },="" {="" duration:="" 800,="" queue:="" false="" });="" });="" });="">

更多详细信息请参看：http://codepen.io/yoannhel/pen/pntHc

在线预览    源码下载