`
天梯梦
  • 浏览: 13724878 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jQuery插件实现的页面功能介绍引导页效果

 
阅读更多

Helloweba.com之前也有相关文章介绍:《构建一个用于产品介绍的WEB应用》,相信对有需要的朋友有帮助。本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它。

 

HTML

首先记得加载所需的css文件和jQuery库文件,以及pagewalkthrough插件。

<!-- CSS --> 
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" /> 
 
<!-- jQuery --> 
<script type="text/javascript" src="jquery.min.js"></script> 
<!-- Page walkthrough plugin --> 
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script> 

 

接着,我们在页面的最下部加入引导内容,就是每一步需要展示的内容,默认先隐藏内容,等会用jQuery调用。

<div id="walkthrough-content"> 
    <div id="walkthrough-1"> 
        <h3>欢迎来到Helloweba示例DEMO演示页</h3> 
 
        <p>页面功能介绍引导页的效果是通过一款叫做pagewalkthrough.js的jQuery插件实现的。</p> 
        <p>点击下一步了解更多...</p> 
    </div> 
 
    <div id="walkthrough-2"> 
        这里是Helloweba网站LOGO,点击这里可以直通网站首页。 
    </div> 
 
    <div id="walkthrough-3"> 
        点击这里可以直接看插件的使用教程。 
    </div> 
 
    <div id="walkthrough-4"> 
        点击这里去下载源码,免费的哦。。 
    </div> 
 
    <div id="walkthrough-5"> 
        这是页脚和版权信息。 
    </div> 
</div> 

 

引导内容支持html内容,你可以在里面加入链接、图片等信息。还有就是引导页所需的箭头图片已经打包好,直接用css调用,关于字体,你可以调用外部字体,如手写字体可能效果更好。

 

jQuery

你完全可以在页面底部加入如下代码来调用pagewalkthrough,关键选项steps是一个数组,定义每一步引导调用的内容,参数 wrapper定义了当前引导对应的元素位置,参数popup定义弹出提示引导层,参数content定义关联的内容元素,参数type定义弹出方式,包 括tooltip和modal以及nohighlight三种方式,参数position定义了弹出层位置,包括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: 'h2.top_title a', 
            popup: { 
                content: '#walkthrough-3', 
                type: 'tooltip', 
                position: 'bottom' 
            } 
        }, { 
            wrapper: 'a[href="http://www.helloweba.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'); 
}); 

 

保存之后,运行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多参数配置,包括设置弹出层宽度、滚动速度,是否自动滚 动,锁定滚动,以及多种回调函数,定义上一步下一步按钮,以及方法调用等等,这些本文不再描述,有兴趣的朋友可以移步到项目官网了解更多:https://github.com/jwarby/jquery-pagewalkthrough

 

分享到:
评论

相关推荐

    jQuery css3动画分步指引插件guide分步引导页面功能

    总结来说,"jQuery css3动画分步指引插件guide"是一个强大的工具,它结合了jQuery的易用性和CSS3的动态效果,为用户提供了一种直观且引人入胜的页面引导方式。无论是在新用户引导、产品演示还是教程场景中,这个插件...

    jquery插件实现的页面引导demo,绝对可用

    **jQuery插件实现的页面引导:使用PageWalkthrough.js** 在网页开发中,为了帮助用户更好地理解和使用网站或应用,通常会引入页面引导功能。这种功能可以向用户提供逐步的使用指导,使他们能够快速上手。`...

    JQuery插件实现网页首次登录提示/页面功能介绍引导/教程式引导/下一步介绍功能

    JQuery作为一个轻量级且强大的JavaScript库,为开发者提供了丰富的工具来实现各种交互效果,包括首次登录提示、页面功能介绍引导、教程式引导以及下一步介绍功能。这些功能旨在帮助新用户快速理解和熟悉网站或应用的...

    jquery网页向导插件可自动滚动页面步骤引导操作

    本主题将深入探讨“jQuery网页向导插件”及其如何实现自动滚动页面的步骤引导操作。这类插件通常用于创建用户友好的互动指南,帮助用户了解网站功能,提高用户体验。 首先,我们需要理解jQuery向导插件的基本概念。...

    jQuery插件pagewalkthrough实现引导页效果

    jQuery插件pagewalkthrough是一种通过向用户展示一系列引导信息来介绍网站或应用功能的工具。它为开发者提供了一种轻量级的方式来创建交互式的引导页,这在网站或应用的新版本发布时尤其有用,可以帮助用户了解新...

    jQuery页面引导插件

    jQuery页面引导插件基于流行的JavaScript库jQuery构建,利用DOM操作、事件处理和动画效果,实现对页面元素的高亮、提示框显示、用户交互跟踪等功能。它通常包含以下几个核心部分: 1. **元素定位**:插件能够识别...

    jq实现首次引导页面

    2. **创建引导页**:创建一个HTML结构作为引导页面,可以包含多个步骤,每个步骤都对应一个网站的功能或操作。这些步骤可以通过`div`元素或其他HTML容器表示,用CSS进行样式设计,使其在页面上以适当的顺序和位置...

    jQuery页面引导插件制作搜索页面步骤引导代码

    jQuery是一款广泛使用的JavaScript库,它提供了丰富的功能和简洁的API,使得创建页面引导插件变得相对简单。本篇文章将深入讲解如何使用jQuery来制作一个搜索页面的步骤引导代码,帮助用户逐步理解并有效利用搜索...

    基于 jQuery简单的页面引导组件

    - **插件集成**:与其他jQuery插件结合,如轮播图、图表等,提供更丰富的引导体验。 总的来说,基于jQuery的简单页面引导组件是提高用户体验的有效工具,通过合理的设置和设计,能帮助用户更好地理解和使用网站或...

    带视觉差效果的平滑单页滚动jQuery插件

    标题 "带视觉差效果的平滑单页滚动jQuery插件" 涉及到的是网页设计和开发领域中的一种流行技术,主要目的是提升用户体验,尤其是对于具有多个滚动区域的单页面网站。这种插件利用jQuery库来实现平滑的页面滚动效果,...

    jquery.joyride页面功能分步指引插件一步步提示页面

    它利用jQuery库的事件处理和DOM操作能力,结合CSS3动画效果,实现了一种动态的、非侵入式的页面引导体验。 ### 2. **安装与引入** 要使用jQuery Joyride,首先需要确保你的项目中已经引入了jQuery库。接着,你可以...

    jQuery页面功能分步指引介绍代码

    `jQuery页面功能分步指引介绍代码`正是这样一个工具,它利用`jQuery`库和`jquery.mobile`插件来创建一个分步式的用户引导流程,帮助用户逐步了解并熟悉新功能。这个代码实现了一个动态的、具有动画效果的引导介绍...

    Guidersjs引导用户熟悉页面版块或页面功能的jQuery用户向导功能插件

    **Guiders.js** 是一款基于 **jQuery** 的用户向导功能插件,它设计的目的是帮助新用户快速熟悉网页的各个板块和功能。在互联网产品日益复杂化的今天,引导用户了解如何有效地使用网站或应用变得至关重要。这款插件...

    超好用的Jquery插件集合

    **jQuery插件是JavaScript库jQuery的强大扩展,它们提供了一系列便捷的功能,用于增强网页的交互性和视觉效果。在“超好用的JQuery插件集合”中,我们可以找到针对不同应用场景的丰富资源,主要包括表单处理和图片...

    jQuery插件 TaoBaoUED左侧导航

    jQuery插件是基于jQuery核心功能进行扩展的功能模块,可以方便开发者快速实现特定的交互效果或功能。创建一个jQuery插件通常包括以下步骤: 1. 定义命名空间:避免与其他插件冲突,一般使用$.fn.extend()方法。 2. ...

    jquery仿flash引导页面进度条加载特效

    标题中的“jquery仿flash引导页面进度条加载特效”是指使用jQuery库来实现一种类似Flash动画效果的页面加载进度条。这种特效通常用于网站加载时显示一个动态的进度条,提高用户体验,让用户知道页面正在加载而不会...

    jquery常用的页面滚动元素动画库插件

    本篇文章将详细介绍一种常用的jQuery页面滚动动画库插件及其相关知识点。 首先,我们要理解页面滚动动画的基本概念。当用户滚动网页时,某些元素随着页面的滚动而动态改变其位置、大小、透明度等属性,这种效果被...

    jquery引导用户熟悉网站板块操作向导插件

    在创建用户操作向导时,我们可以利用jQuery的强大功能,结合CSS和DOM操作,实现高效且流畅的向导效果。 **向导插件的设计原理** 1. **元素定位**:向导插件首先需要能够定位到网站的各个功能区域。这可以通过选择...

    网页向导Jquery插件wlGuide功能操作步骤引导

    **网页向导Jquery插件wlGuide功能操作步骤引导** 在网页开发中,为了提高用户体验,经常需要引导用户了解和熟悉页面的各种功能。`Jquery`插件`wlGuide`便是一个专门用于创建用户引导流程的工具。它通过在页面上创建...

    jQuery滚动插件

    jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库,它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能,极大地提升了用户体验。在网页设计中,滚动效果是一个重要的组成部分,它能引导用户...

Global site tag (gtag.js) - Google Analytics