jQuery插件pagewalkthrough实现引导页效果

现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容。

html代码:

<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文件和代码:

<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文件:

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

(0)

相关推荐

  • iOS基于UIScrollView实现滑动引导页

    上代码前,我们先来看下实现的效果图: WelcomeViewController.h #import <UIKit/UIKit.h> @interface WelcomeViewController : UIViewController @end WelcomeViewController.m #import "WelcomeViewController.h" #define IMAGECOUNT 3 @interface WelcomeViewController ()

  • 简洁易用的iOS引导页制作

    基本上每个app都有引导页,虽然现在这种demo已经比比皆是,但感觉都不全,所以自己整理了一个,只需要传入图片,就可以正常加载出来.由于UIPageControl的小圆点大小和颜色经常与UI设计的不相符,所以后面也会提到重写类方法,进行修改. 先看下效果(图片是在网上随便找的) Untitled.gif 把指导页图片传入guideImages中 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptio

  • iOS 引导页的镂空效果实例

    初衷 最近项目新功能更改较大,产品童鞋要求加入新功能引导,于是一口气花了两天的时间做了一个引导页,当然加上后面的修修补补的时间,就不只两天了,不过这事情其实是一劳永逸的事情,值得做.同时为了能够更好的复用,我把它做成了pod库,项目地址在这里:EAFeatureGuideView. EAFeatureGuideView能做什么 EAFeatureGuideView是UIView的一个扩展,用来做新功能引导提示,达到这样的效果: 局部区域高亮(可以设置圆角) 有箭头指向高亮区域 可以设置一段介绍文

  • RxJava两步打造华丽的Android引导页

    前言 之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能. 效果如下图: 思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return:若不是,则直接setContentView(),然后启动动画再启动MainActivity. 一.WelcomeActivity

  • Android实现绕球心旋转的引导页效果

    现在很多APP都会出现Android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果. 先看一下预览效果: 嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转. 这里我们用到了Android系统的一个组件ViewFlipper,该控件的主要作用是为其中的View切换提供动画效果,主要的方法如下: setInAnimation:设置View进入屏幕时的动画. setOutAnimation:设置View退出屏幕时的动画. showNext:调用该方法可以显示下一个View.

  • iOS实现动态元素的引导图效果

    前言 最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面,而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点.这个模块主要是实现app首次进入时显示的动态的引导图,在用户进行右滑或者左滑的时候,屏幕上的一些元素做出相应的隐藏消失以及位置移动. 实现效果: 图片资源来自网络,侵权即删 先来看看是如何使用的,然后再介绍相关的方法及属性 NSMutableArray * elementsDataArr = [[NSMutableArray alloc] init]; /* 动画元素

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • iOS App初次启动时的用户引导页制作实例分享

    应用程序APP一般都有引导页,引导页可以作为操作指南指导用户熟悉使用:也可以展现给用户,让用户了解APP的功能作用.引导页制作简单,一般只需要一组图片,再把图片组展现出来就可以了.展示图片组常用UIScrollView来分页显示,并且由UIPageControl页面控制器控制显示当前页.UIScrollView和UIPageControl搭配会更加完美地展现引导页的功能作用.下面我们来看具体的实例: 我们用NSUserDefaults类来判断程序是不是第一次启动或是否更新,在 AppDelega

  • iOS App引导页开发教程

    引导页功能简介 方式一: 判断程序是否首次启动,如果是将GuidePageViewController作为窗口的根视图控制器.GuidePageViewController有三个子控件:一个UIScrollView.一个UIPageControl.一个UIButton(默认隐藏),UIScrollView有多个UIImageView子控件,当滚动到最后一页UIButton展示,点击立即体验然后将窗口的根视图控制器设置为UITabBarController: 方式二: 也可以直接将根视图控制器设置

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

随机推荐