jquery Plugin pagewalkthrough implement boot page effect

This article mainly introduces the jquery plug-in Pagewalkthrough implementation of the Guide page effect of the method and sample code, very detailed and practical, the need for small partners can refer to.

Now many sites are not only introduced, more is a number of functions, how to let customers quickly know what function of the site? Here Pagewalkthrough.js Plug-ins can help us achieve, it is a lightweight jquery plug-in, it can help us create a mask guide layer, to achieve the function of the page to guide the completion of the Display page content.

HTML code:

?

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

JS files and code:

?

1 2 3 4 5 6 7 8 9 '

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16-17

<link rel= "stylesheet" href= "Css/jquery.pagewalkthrough.css" > <!--[if LT IE 9]> <script "src=" & Gt;</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:d XImageTransform.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>

The above is the entire contents of this article, I hope you can enjoy.