jquery实现网站向导提示操作插件
dengjianbin
12年前
jquery实现网站向导提示操作插件是一个现在互联网上非常流行的网站功能之一,很多用户第一次来到网站的时候做为引导新手来操作,最近发现了之后就第一时间整理出来与大家分享,不多说了,看一下效果先:
效果如下:
引入插件文件之后页面主要代码如下:
<ol id="joyRideTipContent"> <li data-id="numero1" data-text="下一步" class="custom"> <h2>Stop #1</h2> <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p> </li> <li data-id="numero2" data-text="下一步" data-options="tipLocation:top;tipAnimation:fade"> <h2>Stop #2</h2> <p>Get the details right by styling Joyride with a custom stylesheet!</p> </li> <li data-id="numero3" data-text="下一步" data-options="tipLocation:top left;"> <h2>Stop #3</h2> <p>It works right aligned.</p> </li> <li data-id="numero4" data-text="下一步"> <h2>Stop #4</h2> <p>It works when tips run off the viewport.</p> </li> <li data-id="numero5" data-text="结束"> <h2>Stop #5</h2> <p>Now what are you waiting for? Add this to your projects and get the most out of your apps!</p> </li> </ol>