当前位置：首页 > JavaScript

js 引导实现

2026-02-01 21:42:31JavaScript

引导实现的方法

在JavaScript中实现引导功能（如用户引导、新手教程或操作指引）通常需要结合DOM操作、事件监听和动画效果。以下是几种常见的实现方式：

使用CSS和JavaScript创建高亮引导

通过动态添加高亮层和提示框实现逐步引导：

function createGuide(steps) {
  let currentStep = 0;

  function showStep() {
    const step = steps[currentStep];
    const element = document.querySelector(step.selector);

    // 创建高亮层
    const highlight = document.createElement('div');
    highlight.className = 'guide-highlight';
    document.body.appendChild(highlight);

    // 创建提示框
    const tooltip = document.createElement('div');
    tooltip.className = 'guide-tooltip';
    tooltip.innerHTML = `<p>${step.text}</p><button>下一步</button>`;
    document.body.appendChild(tooltip);

    // 定位元素
    const rect = element.getBoundingClientRect();
    highlight.style.cssText = `
      position: fixed;
      top: ${rect.top}px;
      left: ${rect.left}px;
      width: ${rect.width}px;
      height: ${rect.height}px;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.7);
      z-index: 999;
    `;

    // 绑定事件
    tooltip.querySelector('button').addEventListener('click', () => {
      highlight.remove();
      tooltip.remove();
      currentStep++;
      if (currentStep < steps.length) showStep();
    });
  }

  showStep();
}

使用第三方库

推荐使用成熟的引导库简化开发：

Shepherd.js：专业级引导库

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shadow-md bg-purple-dark',
    scrollTo: true
  }
});

tour.addStep({
  title: 'Welcome',
  text: 'This is the first step of your tour',
  attachTo: {
    element: '.first-element',
    on: 'bottom'
  },
  buttons: [
    { text: 'Next', action: tour.next }
  ]
});
tour.start();

Intro.js：轻量级解决方案

introJs().setOptions({
  steps: [
    { 
      element: '#step1', 
      intro: 'This is the first tooltip' 
    },
    {
      element: '#step2',
      intro: 'Second step'
    }
  ]
}).start();

实现渐进式引导

对于复杂应用，可采用状态管理控制引导流程：

// 使用localStorage记录引导状态
if (!localStorage.getItem('tourCompleted')) {
  startTour();
}

function startTour() {
  // 初始化引导
  localStorage.setItem('tourCompleted', 'true');
}

无障碍访问考虑

确保引导内容对屏幕阅读器友好：

<div role="dialog" aria-labelledby="guide-title">
  <h3 id="guide-title">操作指引</h3>
  <p>请按照提示完成操作</p>
</div>

样式设计建议

配套CSS示例：

js 引导实现

.guide-highlight {
  pointer-events: none;
  transition: all 0.3s ease;
}

.guide-tooltip {
  position: fixed;
  z-index: 1000;
  background: white;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  max-width: 300px;
}

以上方法可根据具体需求组合使用，第三方库适合快速实现，自定义方案则提供更高灵活性。

标签: js