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: