蝙蝠岛资源网 Design By www.hbtsch.com
整体效果展示
这类新手提示的插件还真是少,无奈之下自己写了一个,不带任何图片,完全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。
介绍就这么多了,剩下的就是css和js代码,我就不多说了,大家自己看吧
复制代码代码如下:
*{margin:0;padding:0}
form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,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 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;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 .h1{font-size:40px;font-weight:bold}
.help .step .h2{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();
});
});
下载地址:点击下载
标签:
css,提示功能
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无纯css实现首次登入的新手帮助提示功能的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]