How to use the jQuery plug-in to achieve the boot page effect
This article mainly introduces how to use the jQuery plug-in to achieve the effect of the guide page, the article introduces in great detail, has a certain reference value, interested friends must read it!
HTML
First remember to load the required css files and jQuery library files, as well as the pagewalkthrough plug-in.
Next, we add the boot content at the bottom of the page, that is, the content that needs to be displayed at each step. The content is hidden by default and will be called with jQuery later.
Welcome to the Helloweba sample DEMO demo page
Page function introduces that the effect of the boot page is achieved through a jQuery plug-in called pagewalkthrough.js.
Click next to learn more.
This is the Helloweba website LOGO. Click here to go directly to the home page of the website.
Click here to see the tutorial on the use of plug-ins.
Click here to download the source code, free of charge.
This is the footer and copyright information.
Guide content supports html content, in which you can add links, pictures and other information. There is the arrow image needed to guide the page has been packaged, directly with the css call, about fonts, you can call external fonts, such as handwritten fonts may be better.
JQuery
You can add the following code at the bottom of the page to call pagewalkthrough. The key option steps is an array that defines the contents of each step of the boot call. Parameter wrapper defines the location of the element corresponding to the current boot, parameter popup defines the prompt guide layer, parameter content defines the associated content element, parameter type defines the popup mode, including tooltip, modal and nohighlight, and parameter position defines the location of the pop-up layer. Including top,left, right or bottom.
$(function () {$('body'). Pagewalkthrough ({name:' introduction', steps: [{popup: {content:'# walkthrough-1', type: 'modal'}}, {wrapper:' # logo', popup: {content:'# walkthrough-2', type: 'tooltip', position:' bottom'}}, {wrapper: 'h3.top_title aversion, popup: {content:' # walkthrough-3', type: 'tooltip' Position: 'bottom'}}, {wrapper:' a [href= "http://www.xuebuyuan.com/down-286.html"]', 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');})
After saving, run to see the effect you want. The pagewalkthrough.js plug-in officially provides many parameter configurations, including setting the pop-up layer width, scrolling speed, whether to scroll automatically, locking scrolling, as well as a variety of callback functions, defining previous and next buttons, and method calls, which are not described in this article.
The above is all the content of the article "how to use the jQuery plug-in to achieve the effect of the boot page". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
