jQuery插件pagewalkthrough实现引导页效果

前端技术 2023/09/09 JavaScript

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

html代码：

<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文件和代码：

<script type=\"text/javascript\" src=\"jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"jquery.pagewalkthrough.min.js\"></script>
<script>
$(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=\"http://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar\"]\', 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\');
});
</script>

css文件：

<link rel=\"stylesheet\" href=\"css/jquery.pagewalkthrough.css\">
<!--[if lt IE 9]>
<script src=\"html5.js\"></script>
<![endif]-->
<style type=\"text/css\">
.demo{text-align:center}
.button {display: inline-block;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 22px/100% \'Microsoft yahei\',Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.button:hover {text-decoration: none;}
.button:active {position: relative;top: 1px;}
/* green */
.green {color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top, #7db72f, #4e7d0e);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#7db72f\', endColorstr=\'#4e7d0e\');}
.green:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top, #6b9d28, #436b0c);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#6b9d28\', endColorstr=\'#436b0c\');color:#fff}
.green:active {color: #a9c08c;background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));background: -moz-linear-gradient(top, #4e7d0e, #7db72f);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#4e7d0e\', endColorstr=\'#7db72f\');}
#walkthrough-content{display:none}
#walkthrough-content h3{height:30px; line-height:30px}
#walkthrough-content p{line-height:28px}
</style>

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

本文地址：https://www.stayed.cn/item/26146

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案