
整体效果展示
这类新手提示的插件还真是少,无奈之下自己写了一个,不带任何图片,完全css实现。因为考虑到功能比较特殊,使用不会太频繁,就没写成插件的模式,所有都是写死的,可以看下HTML代码结构
<div class=”help”>
<a href=”###” class=”close” title=”关闭新手帮助”>×</a>
<div id=”step1″ class=”step” step=”1″ style=”top:60px;left:320px;width:250px”>
<b class=”jt jt_top” style=”left:40px;top:-40px”></b>
<p>
<span class=”h1″>①</span><span class=”h2″>注册登录</span>
点这里,点这里,点这里
<a href=”###” class=”next”>下一步</a>
</p>
</div>
<div id=”step2″ class=”step” step=”2″ style=”top:200px;left:400px;width:250px”>
<b class=”jt jt_left” style=”top:20px;left:-40px”></b>
<p>
<span class=”h1″>②</span><span class=”h2″>商品分类</span>
看到了么?看到了么?看到了么?
<a href=”###” class=”next”>下一步</a>
</p>
</div>
<div id=”step3″ class=”step” step=”3″ style=”top:200px;left:500px;width:250px”>
<b class=”jt jt_top” style=”top:-40px;left:40px”></b>
<p>
<span class=”h1″>③</span><span class=”h2″>搜索框</span>
这个就不用我介绍了吧 =)
<a href=”###” class=”over”> 完 成 </a>
</p>
</div>
</div>
重点看下每一步的html代码结构
<div id=”step1″ class=”step” step=”1″ style=”top:60px;left:320px;width:250px”>
<b class=”jt jt_top” style=”left:40px;top:-40px”></b>
<p>
<span class=”h1″>①</span><span class=”h2″>注册登录</span>
点这里,点这里,点这里
<a href=”###” class=”next”>下一步</a>
</p>
</div>
如果要新增加一步,就把这段复制,然后把其中修改其中的内容即可,但要确保step参数的顺序必须是正序,然后id的后缀值也是要正序,与step一样,剩下就是修改窗口top、left的布局以及箭头的top、left布局。
还有一点,箭头可以设置方向,样式分别为:jt_top、jt_bottom、jt_left、jt_right。










