Step Boot plugin: pagewalkthrough instance

Plug-in action: a jquery-based step boot plugin

I also see the case on the Internet, and then through their own changes, deepened the plug-in understanding and usage, the following directly on the code:

SETP1. Introducing jquery and Pagewalkthrough plugins　　

<Linkrel= "stylesheet"href= "Css/jquery.pagewalkthrough.css"><Scripttype= "Text/javascript"src= "Jquery-1.8.3.min.js"></Script><Scripttype= "Text/javascript"src= "Jquery.pagewalkthrough.min.js"></Script>

　　Step2. HTML section to show the page content code:

<Divclass= "Con">    <imgsrc= "1.jpg"alt="">    <Divclass= "Pz Con1"></Div>    <Divclass= "Pz Con2"></Div>    <Divclass= "Pz Con3"></Div>    <Divclass= "Pz Con4"></Div></Div>

　　step3. Step to boot the HTML code that needs to be displayed (note that this part of the code is hidden):

<DivID= "Walkthrough-content"style= "Display:none;">    <DivID= "Walkthrough-1">        <H3>Welcome to Helloweba Demo Page--imever</H3>    </Div>    <DivID= "Walkthrough-2">This is my blog name.</Div>    <DivID= "Walkthrough-3">Here's the navigation .</Div>    <DivID= "Walkthrough-4">This is my favorite Ariel.</Div>    <DivID= "Walkthrough-5">here is the list of articles</Div></Div>

　　Step4. To beautify the above HTML part, that is, the CSS part:

. Con{width:500px;Height:500px;Overflow:Hidden;margin:40px Auto;position:relative; }. Con img{width:100%;Display:Block; }. PZ{position:Absolute;/*Background-color:rgba (23,43,33,.5);*/}. Con1{width:100px;Height:30px;Top:6px; Left:205px; }. Con2{width:200px;Height:30px;Top:90px; Left:0px; }. Con3{width:150px;Height:150px;Top:110px; Left:380px; }. Con4{width:150px;Height:50px;Top:110px; Left:0px; }

View Code

　step5. jquery calls

<Script>$(function() {    //Set Up Tour    $('Body'). Pagewalkthrough ({name:'Introduction', steps: [{popup: {content:'#walkthrough-1', type:'modal'}}, {wrapper:'. Con1', Popup: {content:'#walkthrough-2', type:'tooltip', Position:'Bottom'}}, {wrapper:'. Con2', Popup: {content:'#walkthrough-3', type:'tooltip', Position:'Bottom'}},{wrapper:'. Con3', Popup: {content:'#walkthrough-4', type:'tooltip', Position:' Left'}},{wrapper:'. Con4', Popup: {content:'#walkthrough-5', type:'tooltip', Position:'Bottom'            }        }]    }); //Show the Tour    $('Body'). Pagewalkthrough ('Show');});</Script>

View Code

Here is the result of the demo:

If it helps your study, give me some praise!

Step Boot plugin: pagewalkthrough instance