效果预览 碰见网页引导功能的需求,于是收到了Jquerypagewalkthrough.js这个插件,在github 上下载到源码,英文渣很尴尬,找啊找啊找。终于找到篇中文的博客教程:来源helloweba.com 作者:月光光
第一步 在需要引导的页面head部分加入css和js 1 2 3 4 5 <link rel ="stylesheet" href ="./css/jquery.pagewalkthrough.css" > <script type ="text/javascript" src ="./jquery-2.1.1.js" > </script > <script type ="text/javascript" src ="./jquery.pagewalkthrough.min.js" > </script >
第二步 在body的最后加上引导的内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <style type ="text/css" > #walkthrough-content {display :none} </style > <div id ="walkthrough-content" > <div id ="walkthrough-1" > <h3 > jquerypagewalkthrough<br > 简单使用</h3 > </div > <div id ="walkthrough-2" > <h3 > 下,博客的导航栏</h3 > <h3 > bottom,blog navigation bar</h3 > </div > <div id ="walkthrough-3" > <h3 > 右,博客的logo</h3 > <h3 > right,bolg logo</h3 > </div > <div id ="walkthrough-4" > <h3 > 上,博客的底部</h3 > <h3 > top,blog footer</h3 > </div > <div id ="walkthrough-5" > <h3 > 左,博客切换白天还是黑夜模式</h3 > <h3 > left,blog sun and moon switch</h3 > </div > </div >
第三步 jquery调用pagewalkthrough steps是一个数组,定义每一步引导调用的内容,参数wrapper定义了当前引导对应的元素位置(wrapper中的值就是css选择器),参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括top,left, right or bottom。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <script > $(function ( ) { $('body' ).pagewalkthrough({ name: 'introduction' , steps: [{ popup: { content: '#walkthrough-1' , type: 'modal' } }, { wrapper: '.page-title ul' , popup: { content: '#walkthrough-2' , type: 'tooltip' , position: 'bottom' } }, { wrapper: '.avatar' , popup: { content: '#walkthrough-3' , type: 'tooltip' , position: 'right' } }, { wrapper: '.footer-inner' , popup: { content: '#walkthrough-4' , type: 'tooltip' , position: 'top' } }, { wrapper: '.fa.fa-sun-o' , popup: { content: '#walkthrough-5' , type: 'tooltip' , position: 'left' } }] }); $('body' ).pagewalkthrough('show' ); }); </script >
代码下载demo.zip
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦