网站引导插件enjoyhint

效果图

 

文档下载，点击前往个人博客下载

将文件下载下来以后引入三个文件

<script src="enjoyhint/jquery-1.11.3.min.js"></script>
<script src="enjoyhint/enjoyhint.min.js"></script>
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">

配置文件hint-sequence.js根据自己的实际情况绑定结果

var enjoyhint_instance = new EnjoyHint({});
var enjoyhint_script_steps = [
    
  {
      'next .tag' : '欢迎来到pd次元！让我来引导你了解它的特点。',
      'shape': 'circle',
     'radius': 100,
      'nextButton' : {className: "myNext", text: "可以"},
      'skipButton' : {className: "mySkip", text: "不了!"},
      
  },
 
  {
          'click .search-icon' : '点击这个按钮，展开搜索栏目，进入下一步'
  },
  {
          'key .input-holder' : "请输入关键词搜索，并按“Enter”进去下一步",
          'keyCode' : 13
    },

 
  {
      'next .hist' : '这是你的搜索记录，点击就可以跳转了',
      
  },
  {
          'next .history' : '所有的搜索记录都在这里，最多保存16条',
          
  },
    {
          'click .close' : '点击收起导航栏，同时搜索记录隐藏',
          'shape': 'circle',
            'radius': 20
    },
    {
          'click #right' : '点击这个按钮，切换背景',
              'shape': 'circle',
                'radius': 40
},
     {
          'click #left' : '点击这个按钮，切换背景',
          'shape': 'circle',
          'radius': 40,
     },
     {
              'next #open' : '点击这里开启雪花背景效果',
              'shape': 'circle',
                'radius': 20
              
    },
     {
          'next .fa-paper-plane' : '您的反馈将不胜感激。',
          'shape': 'circle',
            'radius': 20
},
     
    
  
    
  {
      'next .log' : '从这里登录注册以后，可以自定义背景哦！',
      'shape': 'circle',
      'radius': 20,
      'showSkip' : false,
      'nextButton' : {className: "myNext", text: "知道了!"}
  }

];

enjoyhint_instance.set(enjoyhint_script_steps);
enjoyhint_instance.run();

最后引入配置文件