【前端开发实例】HTML CSS - 微信端悬浮引导关注 -（六）

Question. 问题

微信端商城首页制作一个引导关注公众号的二维码，对于公众号的引流可以起到很大的作用。一般商城上的二维码有按照某种逻辑被动推送的形式，比如未关注过公众号的用户，第一次进入商城跳出一个二维码；另一种是用户主动点击某个按钮，触发二维码的展示，有点类似苹果手机上的小黑点（AssistiveTouch）。

Solution. 解决

HTML 部分：

<div class="alert-click" id="alert-click">div>


<div class='mask'>div>

<div class='board'>
    <div class="logo"><span>德玛乃康span>div>
    <div class='qrcode'><img src='images/qrcode.jpg'>div>
    <div class="heart"><span>关注span>div>
    <div class='text'>长按二维码关注公众号div>
div>

HTML部分主要构建触发按钮和二维码部分，二维码部分由两个层组成，底部的透明灰色层，和底部的二维码层。

CSS 部分：

/* 触发按钮 */
.alert-click {
    width: 40px; height: 40px; display: block;
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    background-image: url(images/icon_qrcode.png);
    background-repeat:no-repeat;
    background-position: center;
    background-size: 24px;
    color: #fff; line-height: 2rem; text-align: center; font-size: 1.2rem;
    -webkit-border-radius: 50%; border-radius: 50%;
    position: fixed; right: 20px; top: 240px; z-index: 1001;
}

/* 透明灰色层 */
.mask { 
    position: fixed; top: 0; left: 0; z-index: 998; 
    width: 100%; height: 100%; display: none;
    background-color: #000; opacity: 0.5; overflow: hidden;
}

/* 二维码层 */
.board { 
    position: fixed; background-color: #fff; top: 25%; left: 20%; 
    width: 60%; height: 310px; z-index: 999; display: none;
}

.board .logo span {
    display: block; height: 54px; color: #000;
    font-size: 16px; line-height: 54px; font-weight: 700;
    padding-left: 35%; padding-top: 4px; margin: 0 auto;
    background: url(images/logo.png) no-repeat 11% 0; background-size: 54px;
}
.board .qrcode { 
    position: relative; width: 80%; 
    margin-left: 10%; margin-bottom: 8px;
}
.board .qrcode img { 
    width: 100%; border-radius: 6px;
}
.board .heart span {
    display: block;
    height: 32px; width: 70px;
    margin: 0 auto; padding-left: 34px;
    font-size: 18px; color: #cc0000; line-height: 32px; font-weight: 700; text-align: center; 
    background: url(images/icon_heart.png) no-repeat left 2px; background-size: 26px;
}
.board .text { 
    position: relative; width: 90%; 
    margin-left: 5%; margin-top: 2%; padding-bottom: 8px;
    text-align: center; color: #666;
}

CSS 中主要应用到的技术是display、position、z-index、opacity几个重要样式实现排版。

JS部分：

<script type="text/javascript">
$("#alert-click").click(function(){
    $('.mask').css('display','block');
    $('.board').css('display','block');
});
$('.mask').click(function(){
    $('.mask').css('display','none');
    $('.board').css('display','none');
});
script>

添加几个部件的显示与隐藏的交互效果。

Effection. 效果