Das jQuery-Plug-in „pagewalkthrough“ realisiert die Leitseite effect_jquery

Heutzutage sind viele Websites nicht nur Einführungen, sondern verfügen auch über einige Funktionen. Wie kann man Kunden schnell darüber informieren, welche Funktionen die Website hat? Das Plugin pagewalkthrough.js kann uns dabei helfen, dies zu erreichen. Es handelt sich um ein leichtes jQuery-Plugin, das uns dabei helfen kann, eine Maskenführungsebene zu erstellen, um die Seitenfunktionsführungsfunktion zu realisieren und den anzuzeigenden Seiteninhalt zu steuern.

HTML-Code:

<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-Dateien und Code:

<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-Datei:

<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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.