整体效果展示
这类新手提示的插件还真是少，无奈之下自己写了一个，不带任何图片，完全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
>
<
br
>点这里，点这里，点这里<
br
>
<
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
>
<
br
>看到了么？看到了么？看到了么？<
br
>
<
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
>
<
br
>这个就不用我介绍了吧 =)<
br
>
<
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
>
<
br
>点这里，点这里，点这里<
br
>
<
a
href="###" class="next">下一步</
a
>
</
p
>
</
div
>
|
如果要新增加一步，就把这段复制，然后把其中修改其中的内容即可，但要确保step参数的顺序必须是正序，然后id的后缀值也是要正序，与step一样，剩下就是修改窗口top、left的布局以及箭头的top、left布局。
还有一点，箭头可以设置方向，样式分别为：jt_top、jt_bottom、jt_left、jt_right。
介绍就这么多了，剩下的就是css和js代码，我就不多说了，大家自己看吧
*{
margin
:
0
;
padding
:
0
}
form,ul,ol,li,dl,dt,dd,h
1
,h
2
,h
3
,h
4
,h
5
,p{
list-style
:
none
outside
none
}
a{
text-decoration
:
none
;
color
:
#ccc
;
outline
:
none
}
a:hover{
text-decoration
:
none
}
a img{
border
:
none
}
.fr{
float
:
right
}
.fl{
float
:
left
}
.disn{
display
:
none
}
html{
height
:
100%
;
overflow
:
hidden
;-moz-user-select:
none
;-khtml-user-select:
none
;user-select:
none
}
body{
font
:
12px
/
1.8
\
5
FAE\
8
F
6
F\
96
C
5
\
9
ED
1
,\
5
B
8
B\
4
F
53
;
background
:
url
(bg.png)}
.
help
{
position
:
absolute
;
z-index
:
5555
;
width
:
100%
;
height
:
100%
;
background
:
none
rgba(
0
,
0
,
0
,
0.7
);
display
:
none
}
.
help
.close{
float
:
right
;
font-size
:
40px
;
color
:
#fff
;
width
:
40px
;
height
:
40px
;
line-height
:
36px
;
text-align
:
center
;
background
:
none
}
.
help
.close:hover{
background
:
none
rgba(
0
,
0
,
0
,
0.7
)}
.
help
.step{
position
:
absolute
;
color
:
#eee
;
padding
:
0
20px
15px
;
background
:
none
rgba(
0
,
0
,
0
,
0.7
);border-radius:
5px
;
display
:
none
}
.
help
.step .jt{
font-size
:
0
;
height
:
0
;
border
:
20px
solid
rgba(
0
,
0
,
0
,
0
);
position
:
absolute
}
.
help
.step .jt_left{
border-right
:
20px
solid
rgba(
0
,
0
,
0
,
0.7
)}
.
help
.step .jt_right{
border-left
:
20px
solid
rgba(
0
,
0
,
0
,
0.7
)}
.
help
.step .jt_top{
border-bottom
:
20px
solid
rgba(
0
,
0
,
0
,
0.7
)}
.
help
.step .jt_bottom{
border-top
:
20px
solid
rgba(
0
,
0
,
0
,
0.7
)}
.
help
.step .h
1
{
font-size
:
40px
;
font-weight
:
bold
}
.
help
.step .h
2
{
font-size
:
28px
;
font-weight
:
bold
;
padding-left
:
10px
}
.
help
.step .next,
.
help
.step .over{
border
:
1px
solid
#fff
;
color
:
#fff
;
padding
:
0
5px
;
float
:
right
;
margin-top
:
10px
}
.
help
.step .next:hover,
.
help
.step .over:hover{
background
:
none
rgba(
50
,
50
,
50
,
0.7
)}
|
$(
function
(){
$(
'.help'
).show();
$(
'#step1'
).show();
$(
'.close'
).on(
'click'
,
function
(){
$(
'.step'
).hide();
$(
'.help'
).hide();
});
$(
'.next'
).on(
'click'
,
function
(){
var
obj = $(
this
).parents(
'.step'
);
var
step = obj.attr(
'step'
);
obj.hide();
$(
'#step'
+(parseInt(step)+1)).show();
});
$(
'.over'
).on(
'click'
,
function
(){
$(
this
).parents(
'.step'
).hide();
$(
'.help'
).hide();
});
});
|
下载地址：点击下载
本文转自胡尐睿丶博客园博客，原文链接：http://www.cnblogs.com/hooray/archive/2012/03/31/2426601.html，如需转载请自行联系原作者
扫一扫
1303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
