今天跟大家分享一款用户引导插件:intro.js,可以很好的介绍你的网站功能,提高用户体验。
HTML
步骤HTML代码,在div加上序号属性值data-step,和结束 data-intro
<div><input class="btn" type="button" value="点击我"></div>
<div data-step="2" data-intro="第二步,冲午饭!">接着,冲午饭。</div>
<div data-step="1" data-intro="第一步,吃早饭!">首页,吃早饭。</div>
<div data-step="3" data-intro="第三步,吃晚饭!">最后,吃晚饭。</div>
引入jquery和intro相关组件
<link rel="stylesheet" href="css/introjs.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/introjs-ie.css?v=030">
<!-- <![endif]-->
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<script src="jquery.js"></script>
<script src="js/intro.js"></script>
调用intro插件
$(function() {
var $btn = $('.btn');
$btn.on('click',
function() {
introJs().setOptions({
nextLabel: '下一步 →',
prevLabel: '← 上一步',
skipLabel: '退出'
}).start();
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791