用户引导【introjs】

@admin  February 26, 2018

https://introjs.com/

http://www.jq22.com/demo/jquery-intro-141216223631/example/html-tooltip/index.html

使用代码

        <div class="row-fluid marketing">
        <div id="step2" class="span6">
          <h4>Section One</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Two</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Three</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
        </div>

        <div id="step3" class="span6">
          <h4>Section Four</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>


          <h4>Section Five</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>

          <h4>Section Six</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
        </div>
        </div>
          <script type="text/javascript">
          function startIntro(){
            var intro = introJs();
              intro.setOptions({
                steps: [
                  {
                    element: '#step1',
                    intro: "This is a <b>bold</b> tooltip."
                  },
                  {
                    element: '#step2',
                    intro: "Ok, <i>wasn't</i> that fun?",
                    position: 'right'
                  },
                  {
                    element: '#step3',
                    intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
                    position: 'left'
                  },
                  {
                    element: '#step4',
                    intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
                    position: 'bottom'
                  },
                  {
                    element: '#step5',
                    intro: '<strong>Get</strong> it, <strong>use</strong> it.'
                  }
                ]
              });

              intro.start();
          }
        </script>

评论已关闭