Producttour.js（Producttour.js）

优质

小牛编辑

134浏览

2023-12-01

Producttour.js是一个jQuery插件，可以快速轻松地将帮助指南实现到您的网站中。

一个简单的producttour.js示例如下所示 -

<!doctype html>
<html lang = "en" class = "no-js">
   <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/reset.css"> 
      <link rel = "stylesheet" href = "css/style.css"> 
      <script src = "js/modernizr.js"></script> 
   </head>
   <body background = "tp.png">
      <div class = "cd-nugget-info">
         <button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>
      </div>
      <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>Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit. Modi alias animi molestias in, aperiam.</p>
               <img src = "img/step-1.png" alt = "step 1">
            </div>
         </li> 
         <li class = "cd-single-step">
            <span>Step 2</span>
            <div class = "cd-more-info top">
               <h2>Step Number 2</h2>
               <p>Lorem ipsum dolor sit amet, consectetur 
                  adipisicing elit. Officia quasi in quisquam.</p>
               <img src = "img/step-2.png" alt = "step 2">
            </div>
         </li> 
         <li class = "cd-single-step">
            <span>Step 3</span>
            <div class = "cd-more-info right">
               <h2>Step Number 3</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Optio illo non enim ut necessitatibus perspiciatis,
                  dignissimos.</p>
               <img src = "img/step-3.png" alt = "step 3">
            </div>
         </li> 
      </ul> 
      <script src = "js/jquery-2.1.4.js"></script>
      <script src = "js/jquery.mobile.min.js"></script> 
      <script src = "js/main.js"></script> 
   </body>
</html>