jQuery |产品导览插件

jQuery Product Tour插件是一个轻量级、响应式的导览插件，供用户和程序员使用，帮助他们通过分步说明了解产品或网站的使用情况。它是一个插件，用于为最终用户实施快速简便的帮助指南。它有助于为 Web 应用程序生成移动友好的可定制分步指南。它为新用户提供网络产品的“免费试用”版本，以收集有关该产品的更多知识。

注意：请从产品导览插件下载以下库文件并将其保存在您的工作文件夹中以包含在您的代码中。程序员可以根据项目要求更改路径和 CSS 文件。

程序：以下示例演示了使用 CSS 和 javascript 代码开发的产品导览插件的基本工作。 HTML 页面由一个带有列表项的无序列表组成。每个列表项都包含产品指南的一个步骤以及插件的类，这些类控制诸如标题、描述、移动设备图像和任何步骤的工具提示位置等属性。

  

    
    
  
    
    
    
  
    jQuery Product tour plugin
  
    
        body {
            text-align: center;
        }
  
        .height {
            height: 10px;
        }
    

  

    
    jQuery Product tour plugin
  
    
        GeeksforGeeks Product Tour
        
            Start GFG tour
        
    
  
    
        
            Step 1
  
            
                
                        Write From Home Challenge
                    
                
                  
                
                    When the whole nation is on the verge
                    of lockdown due to COVID-19 pandemic 
                    and all Geeks across the country have 
                    to stay indoors, we at GeeksforGeeks
                    won’t let this outbreak to decrease 
                    your productivity anyhow. And, with 
                    the same concern, GeeksforGeeks is 
                    coming up with the Write From Home 
                    Challenge for you!
                
  
                
            
         
  
        
            Step 2
  
            
                
                        Must Do Coding Questions
                    
                
                  
                
                    As the placement season is back so are we
                    to help you ace the interview. You can 
                    also take part in our mock placement 
                    contests which will help you learn different
                    topics and practice at the same time,
                    simulating the feeling of a real placement 
                    test environment.
                
                
            
         
  
        
            Step 3
  
            
                
                        What is Artificial Intelligence
                    
                
                  
                
                    Software as a service, Infrastructure as
                    a service, Platform as a service, etc. 
                    are common services that everyone has 
                    heard of in the tech world. But what 
                    about Artificial Intelligence as a 
                    service?! Most companies these days use 
                    some sort of “as a service” to obtain 
                    services for a fee so that they can focus
                    on their core business. But AIaaS is 
                    relatively new and its emergence is due 
                    to the rising popularity of Artificial 
                    Intelligence in the IT industry.
                
                  
                
            
         
     
  
    
    
  
    
    
    
    
    

  

输出：

移动输出：