首页 > 网站 > 建站经验 > 正文

jQ uery插件pagewalkthrough实现引导页效果

2019-11-02 15:43:47
字体:
来源:转载
供稿:网友

   这篇文章主要介绍了jQuery插件pagewalkthrough实现引导页效果的方法和示例代码,十分的详细和实用,有需要的小伙伴可以参考下。

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

  html代码:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到网页引导示例DEMO演示页</h3>   <p>页面功能介绍引导页的效果是通过一款叫做<a href="https://github.com/jwarby/jquery-pagewalkthrough" target="_blank">pagewalkthrough.js</a>的jQuery插件实现的。</p> <p>点击下一步了解更多...</p> </div>   <div id="walkthrough-2"> 这里是网站LOGO,点击这里可以直通网站首页。 </div>   <div id="walkthrough-3"> 点击这里可以直接看插件的使用教程。 </div>   <div id="walkthrough-4"> 点击这里去下载源码,免费的哦。。 </div>   <div id="walkthrough-5"> 这是页脚和版权信息。 </div> </div>

  js文件和代码:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript" src="jquery.min.js"></script>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表