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

标签: html 前端开发 微信 引导关注
2382人阅读 评论(0) 收藏 举报
分类:

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. 效果

这里写图片描述

查看评论

实现微信公众号“一键关注”功能?

由于微信的限制,公众号关注二维码只能在一段时间内有效!这样给开发者带来了很多不便。 在网上找了很多资料,大多方法已经失效,目前如下方法比较实用: 1. 大家注意如下的链接,红色*号...
  • xiongbo_
  • xiongbo_
  • 2017-06-07 11:09:22
  • 7255

微信公众号开发--关注后自动回复(Java记录篇)

转载自 http://blog.csdn.net/lyq8479/article/details/8944988 文中所用到的jar dom4j XStream的jar包 扫描下方二维码可关注 你...
  • coco2d_x2014
  • coco2d_x2014
  • 2017-09-20 21:07:37
  • 3114

设置html网页只能在微信中打开,并禁用分享功能

(function () { /* begin禁用微信分享功能 */ function onBridgeReady() { WeixinJSBridge.call('hideOption...
  • u013176571
  • u013176571
  • 2017-05-02 14:51:33
  • 4798

前端实现微信分享

前端实现微信分享,思路是先申请借口,配置环境,然后调用微信公众平台开放的用于分享的接口实现分享即可。...
  • Miss_Liang
  • Miss_Liang
  • 2017-06-05 14:16:07
  • 4950

网站添加微信登录功能

/* *微信扫二维码登录 *///1、首页登录按钮html 登录//2、登录按钮链接js $('.loginLink').attr('href', 'src/index.html#/access/si...
  • taotao12312
  • taotao12312
  • 2017-08-07 17:25:16
  • 1373

微信小程序微信服务号开发微信公众平台开发前端开发框架

适合微信公众平台的前端框架,微信小程序微信服务号开发微信公众平台开发前端开发框架...
  • qq_36305327
  • qq_36305327
  • 2017-05-21 15:58:16
  • 1419

微信公众平台开发:进阶篇(Web App开发入门)

WebApp与Native App有何区别呢? Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布...
  • yual365
  • yual365
  • 2013-11-19 11:21:32
  • 70034

实现微信内置浏览器全屏播放模式下html元素漂浮

html,body { padding: 0;
  • a409051987
  • a409051987
  • 2017-04-22 20:56:05
  • 2166

微信前端开发接口一览

注:此文不是原创,请点击链接http://caibaojian.com/toutiao/5363进入原作者。
  • ma_yajie
  • ma_yajie
  • 2017-06-14 14:20:27
  • 134

html5手机网站调用微信分享

  • 2015年07月16日 14:23
  • 17KB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 793
    排名: 6万+