前言
公司官网会员页面菜单导航过多,所以需要添加一个引导页(第一次登录或注册后进入会员中心)。一开始想着去百度一个简单的实现(我是做后台的,前端页面改改效果还行,徒手去做有点困难),并没有找到合适的效果,提供的示例代码比较混乱(完全看不懂的那种)。
只能自己想办法。分析引导页效果,无非就是全屏展示,然后点击一张引导页面,跳出下一张引导页,展示结束后隐藏引导页。
一开始想用 swiper,来个全屏的轮播图做引导页,但不太好对上下页按钮监听,实现最终隐藏引导页的效果。
那么就自己构建一个 HTML 结构,展示引导页图片,并添加相应按钮位置,设置按钮点击事件即可。
实现
html 部分
<ul class="guide_imgs"> <li class="close"></li> <li><img src="{DT_SKIN}guide/guide1.jpg"/></li> <li><img src="{DT_SKIN}guide/guide2.jpg"/></li> <li><img src="{DT_SKIN}guide/guide3.jpg"/></li> <li><img src="{DT_SKIN}guide/guide4.jpg"/></li> <li><img src="{DT_SKIN}guide/guide5.jpg"/></li> <li><img src="{DT_SKIN}guide/guide6.jpg"/></li> <li><img src="{DT_SKIN}guide/guide7.jpg"/></li> </ul>
{DT_SKIN}
为 destoon 模板标签,表示默认皮肤的地址,可替换成自己的目录路径。
css 部分
.guide_imgs { position: absolute; z-index: 9999; width: 100%; height: 100%; overflow: hidden; } .guide_imgs li { width: 100%; height: 100%; } .guide_imgs li:first-child { position: absolute; right: 0; width: 100px; height: 60px; } .guide_imgs li img{ width: 100%;height: 100%; } </style>
jQuery 部分
$('.guide_imgs li').click(function () { if($(this).hasClass('close')) { $(this).parent().remove(); } else { $(this).remove(); } });
既然使用了 jQuery, 那么自然要在 html 页面中引入 jQuery 库文件,否则会报错。
我的示例里,点击引导图片会将当前页面删除,借此实现切换下一页的效果。并单独定义了一个 “跳过” 按钮(用 class
值进行区分),定位在引导页面的右上角,点击则删除所有引导图片,退出引导页面。
以这个思路走下去,也可以定义其他类型的按钮,不过如果需要查看上一页,将当前引导图片删除的方式就不合适了。这种情况下,可以考虑使用 css 样式 display:none
和 display:block
进行切换展示,也可以使用 jQuery 的 show()
和 hide()
方法进行切换展示。
考虑到当前页面文档高度可能超过了屏幕可视高度,也就是页面存在滚动条的情况,可以在展示引导页的同时,对 body
添加 overflow:hidden
来取消滚动条。
完整版
<ul class="guide_imgs"> <li class="close_guide"></li> <li><img src="{DT_SKIN}guide/guide1.jpg"/></li> <li><img src="{DT_SKIN}guide/guide2.jpg"/></li> <li><img src="{DT_SKIN}guide/guide3.jpg"/></li> <li><img src="{DT_SKIN}guide/guide4.jpg"/></li> <li><img src="{DT_SKIN}guide/guide5.jpg"/></li> <!--<li><img src="{DT_SKIN}guide/guide6.jpg"/></li>--> <li class="last_guide"><img src="{DT_SKIN}guide/guide7.jpg"/></li> <li class="prev_guide"></li> </ul>
.guide_imgs { position: absolute; z-index: 99999; width: 100%; height: 100%; overflow: hidden; } .guide_imgs li { width: 100%; height: 100%; } .guide_imgs li:first-child { position: absolute; right: 0; width: 100px; height: 60px; } .guide_imgs li:last-child { position: absolute; right: 154px; bottom: 14px; width: 128px; height: 60px; /*border: 1px solid #ff0000;*/ } .guide_imgs li img{ width: 100%;height: 100%; }
$('.guide_imgs li').click(function () { if($(this).hasClass('close_guide')) { $(this).parent().remove(); } else if($(this).hasClass('prev_guide')) { $('.prev_show').show().removeClass('prev_show').prev().addClass('prev_show'); } else { $(this).prev().removeClass('prev_show'); $(this).addClass('prev_show'); $(this).hide(); if ($(this).hasClass('last_guide')) { $(this).parent().remove(); } } });
右下角位置添加了一个上一页的按钮,这就需要增加一个 class
判断分支,并且使用 hide()
和 show()
进行切换展示。
以下是要实现的引导图示例: