jQuery插件pagewalkthrough实现引导页效果

标签:天恒资讯    日期:2018-01-09 10:49    录入:天恒娱乐平台注册    浏览:

  

[jQuery,pagewalkthrough,引导页]jQuery插件pagewalkthrough实现引导页效果

  

现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容。

  

  

  

  

html代码:  

  
  
  
  
  

欢迎来到网页引导示例DEMO演示页

  

页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。

  

点击下一步了解更多...

  
  
  这里是网站LOGO,点击这里可以直通网站首页。

  

  
  点击这里可以直接看插件的使用教程。

  

  
  点击这里去下载源码,免费的哦。。

  

  
  这是页脚和版权信息。

  

  
  
  
  

js文件和代码:  

  
  
  $(function() {  // Set up tour  $('body').pagewalkthrough({  name: 'introduction',  steps: [  { popup: {content: '#walkthrough-1',type: 'modal' }  }, {wrapper: '#logo',popup: {content: '#walkthrough-2',type: 'tooltip',position: 天恒娱乐注册 'bottom'}  }, {wrapper: 'h2.top_title a',popup: {content: '#walkthrough-3',type: 'tooltip',position: 'bottom'}  }, {wrapper: 'a[href=""]', popup: {content: '#walkthrough-4',type: 'tooltip',position: 'right'}  }, {wrapper: '#footer p',popup: {content: '#walkthrough-5',type: 'tooltip',position: 'top'}  }]  });  // Show the tour  $('body').pagewalkthrough('show');  });  
  
  

css文件:  

  
  
        
  
  

以上所述就是本文的全部内容了,希望大家能够喜欢。

  

★★★小编:天恒娱乐 整理文章,欢迎大家转载 ★★★