jQuery引导插件_Html页面蒙版引导插件
程序员文章站
2021-12-23 21:09:00
...
分享一个常见的场景、一般我们在打开一些有更改的网站的时候都会有新手引导、下面就和大家分享一个jQuery的新手引导的Demo、jQuery页面步骤引导新手代码是一款bootstrap搜索页面步骤引导效果、希望对大家有用
引入资源文件
<!-- jQuery --> <script src="jquery-1.11.3.min.js"></script> <!-- EnjoyHint JS and CSS files --> <script src="enjoyhint/enjoyhint.min.js"></script> <link href="enjoyhint/enjoyhint.css" rel="stylesheet"> <!-- Bootstrap --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="bootstrap.min.js"></script> <!-- My style --> <link rel="stylesheet" href="style.css">
js代码
var enjoyhint_instance = new EnjoyHint({}); var enjoyhint_script_steps = [ { ´next .navbar-brand´ : ´欢迎来到我的搜索!让我来引导你了解它的特点。´, ´nextButton´ : {className: "myNext", text: "可以"}, ´skipButton´ : {className: "mySkip", text: "不了!"} }, { ´key #mySearchButton´ : "请输入关键词搜索,并按“Enter”进去下一步", ´keyCode´ : 13 }, { ´click .btn´ : ´点击这个按钮,切换下拉菜单,进入下一步´ }, { ´next .about´ : ´检查可用的所有功能的列表´, ´shape´: ´circle´ }, { ´next .contact´ : ´您的反馈将不胜感激。´, ´shape´: ´circle´, ´radius´: 70, ´showSkip´ : false, ´nextButton´ : {className: "myNext", text: "知道了!"} } ]; enjoyhint_instance.set(enjoyhint_script_steps); enjoyhint_instance.run();
jquery 页面引导插件实例源代码下载链接: jquery 引导插件 密码: qfxf
推荐阅读
-
腾讯微云黑色遮罩引导蒙版更好的CSS实现方式_html/css_WEB-ITnose
-
腾讯微云黑色遮罩引导蒙版更好的CSS实现方式_html/css_WEB-ITnose
-
jQuery插件pagewalkthrough实现引导页效果_jquery
-
jQuery和CSS3超酷3D页面切换导航菜单插件_html/css_WEB-ITnose
-
jQuery插件pagewalkthrough实现引导页效果_jquery
-
jQuery插件pagewalkthrough实现引导页效果
-
15款jQuery分布引导插件分享_jquery
-
jQuery和CSS3超酷3D页面切换导航菜单插件_html/css_WEB-ITnose
-
jQuery插件pagewalkthrough实现引导页效果
-
15款jQuery分布引导插件分享_jquery