BlueDream.js(蓝梦)——jQuery网站使用引导
BlueDream.js演示链接
BlueDream.js是一款用户引导插件，可以让您的网站更容易入门。
BlueDream.js依赖jQuery，因此自身体积小巧，经过细致的优化，特效流畅、性能稳定。
BlueDream.js设计合理，使用非常方便，仅需引入一个css文件和一个js文件。
BlueDream.js界面简洁大方，瞬间提升网站档次。
引入css、js文件(一定不要忘记引入jQuery)：
<!-- 引用 BlueDream 的样式 -->
<link href="css/bluedream.css" rel="stylesheet">
<!-- 先引入jQuery插件 -->
<script type="text/javascript" src="js/jquery.1.10.2.min.js"></script>
<!-- 引入BlueDream导航 -->
<script type="text/javascript" src="js/bluedream.js"></script>
进行配置：
//配置BlueDream
//第一个参数：需要引导的元素数组。数组元素的顺序即引导框出现的顺序。最多支持6个元素！
//第二个参数：可选。规定动画的速度。默认是 "normal"。
//可能的值：毫秒 （比如 1500）|"slow"|"normal"|"fast"
$("body").bdream([{
//要引导的元素id
id: "bluedream",
//引导框相对于引导元素的位置。
//可能的值："left"|"right"|"top"|"bottom"
position: "left",
//引导框显示内容。
message: "蓝梦(BlueDream)插件"
}],1500);
调用：
//配置之后，任意位置调用该方法即可显示引导插件
bdreamStart();
完整使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BlueDream(蓝梦)——jQuery网站使用引导插件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="bluedream.js - Better introductions for websites and features with a step-by-step guide for your projects.">
<meta name="author" content="YangYuan">
<!-- 页面基础样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- 引用 BlueDream 的样式 -->
<link href="css/bluedream.css" rel="stylesheet">
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right" id="links">
<li><a href="http://www.kpdown.com" target="_blank">开辟软件站赞助</a></li>
<li><a href="http://www.cnblogs.com/iyangyuan">作者博客</a></li>
<li><a href="" target="_blank">View On GitHub</a></li>
</ul>
<h3 class="muted">插件名称：bluedream.js</h3>
</div>
<hr>
<div class="jumbotron">
<h1 id="bluedream">BlueDream</h1>
<p class="lead" id="howToUse"> 配置： <code>$("body").bdream();</code> 启动： <code>bdreamStart();</code> </p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:bdreamStart();">点击查看效果</a>
</div>
<hr>
<div class="row-fluid marketing">
<div class="span6" id="kpdown">
<h4>开辟软件站</h4>
<p>
开辟软件站致力于软件分享，提供经典优质软件，以公益为核心价值观，为用户提供一个优良下载环境的同时，最大化“我为人人”理念。
</p>
<h4>开辟软件站</h4>
<p>
开辟软件站致力于软件分享，提供经典优质软件，以公益为核心价值观，为用户提供一个优良下载环境的同时，最大化“我为人人”理念。
</p>
<h4>开辟软件站</h4>
<p>
开辟软件站致力于软件分享，提供经典优质软件，以公益为核心价值观，为用户提供一个优良下载环境的同时，最大化“我为人人”理念。
</p>
</div>
<div class="span6" id="author">
<h4>关于作者</h4>
<p>
作者即开辟软件站站长，程序猿一枚，喜欢折腾，乐于奉献，希望以后能有更多的朋友能投入公益的怀抱，共同建设鼎盛中华。
</p>
<h4>关于作者</h4>
<p>
作者即开辟软件站站长，程序猿一枚，喜欢折腾，乐于奉献，希望以后能有更多的朋友能投入公益的怀抱，共同建设鼎盛中华。
</p>
<h4>关于作者</h4>
<p>
作者即开辟软件站站长，程序猿一枚，喜欢折腾，乐于奉献，希望以后能有更多的朋友能投入公益的怀抱，共同建设鼎盛中华。
</p>
</div>
</div>
<hr>
</div>
<!-- 先引入jQuery插件 -->
<script type="text/javascript" src="js/jquery.1.10.2.min.js"></script>
<!-- 引入BlueDream导航 -->
<script type="text/javascript" src="js/bluedream.js"></script>
<script>
//配置BlueDream
//第一个参数：需要引导的元素数组。数组元素的顺序即引导框出现的顺序。最多支持6个元素！
//第二个参数：可选。规定动画的速度。默认是 "normal"。
//可能的值：毫秒 （比如 1500）|"slow"|"normal"|"fast"
$("body").bdream([{
//要引导的元素id
id: "bluedream",
//引导框相对于引导元素的位置。
//可能的值："left"|"right"|"top"|"bottom"
position: "left",
//引导框显示内容。
message: "蓝梦(BlueDream)插件"
},{
id: "kpdown",
position: "right",
message: "开辟软件站简介"
},{
id: "author",
position: "top",
message: "插件作者简介"
},{
id: "howToUse",
position: "bottom",
message: "BlueDream使用说明"
},{
id: "links",
position: "bottom",
message: "扩展链接"
}],1500);
</script>
</body>
</html>
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
