本文主要是介绍新手引导插件intro.js的使用示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
请在这里查看示例 ☞ intro示例
<!doctype html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <title>demo</title> <link rel="stylesheet" href="css/introjs.min.css"> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/intro.min.js"></script> <style> * {margin: 0; padding: 0;} .f {margin: 30px 50px; background: red;} .b {display: inline-block;} </style> </head> <body> <div class="a f" data-step="1" data-intro='介绍1'>这是第1个引导</div> <div class="b f" data-step="3" data-intro='<img src="../images/a1.png">'>这是第3个引导</div> <div class="c f" data-step="2" data-intro='<div style="border: 1px solid blue"><p style="border: 1px solid yellow">使用html元素丰富介绍内容使用html元素丰富介绍内容使用html元素丰富介绍内容</p></div>'>这是第2个引导</div> </body> <script> ;$(function() { //官方网址: http://www.jq22.com/jquery-info1320 //github: https://github.com/usablica/intro.js/blob/master/README.md introJs().setOptions({ 'prevLabel': '← 上一步', 'nextLabel': '下一步 →', 'skipLabel': '跳过', 'doneLabel': '完成','showBullets': false,//隐藏直接跳转按钮(避免onchangebug) }).start().onexit(function() {//非常规退出 console.log(2); }).oncomplete(function() {//正常完成 console.log(1); }).onchange(function(obj) {//已完成当前一步 var curNum = parseInt($(obj).attr('data-step').match(/\d+/)[0]);//当前的下标 $('.tipStep'+ (curNum-1)).hide();//隐藏前一个 $('.tipStep'+ (curNum+1)).hide();//隐藏后一个 $(obj).show();//显示当前 }); }); </script>
</html>这篇关于新手引导插件intro.js的使用示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
