jQuery引导插件_Html页面蒙版引导插件
2017-07-12 13:25:34  By: dwtedx

分享一个常见的场景、一般我们在打开一些有更改的网站的时候都会有新手引导、下面就和大家分享一个jQuery的新手引导的Demo、jQuery页面步骤引导新手代码是一款bootstrap搜索页面步骤引导效果、希望对大家有用

jquery 页面引导插件


引入资源文件

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+