关闭

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

标签: html前端开发微信引导关注
2084人阅读 评论(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. 效果

这里写图片描述

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

在JSSDK中,为开发者提供了一个扫一扫API服务
  • kgsew
  • kgsew
  • 2015-11-24 14:16
  • 3177

html5手机网站调用微信分享

  • 2015-07-16 14:23
  • 17KB
  • 下载

微信api 关注事件案例

'wxtest1', 'appid'
  • echocdzh
  • echocdzh
  • 2016-02-18 09:14
  • 1402

java 微信接入 关注和取消关注

//最基础的servlet 进行接收package com.cq.wechat; import java.io.IOException; import java.io.PrintWriter; im...
  • textalign
  • textalign
  • 2017-03-04 15:31
  • 996

微信公众平台开发教程Java版(六) 事件处理(菜单点击/关注/取消关注)

前言: 事件处理是非常重要的,这一章讲讲常见的事件处理   1、关注/取消关注 2、菜单点击   事件类型介绍: 在微信中有事件请求是消息请求中的一种。请求类型为:event 而even...
  • tuposky
  • tuposky
  • 2014-10-29 17:25
  • 11732

微信公众号开发系列三:响应关注和取关事件

当我们关注某些微信公众号的时候,有的公众号会给我们回复一条文本信息。本节内容,我们就来实现如何在用户关注公众号后,由公众号给用户回复一条文本信息。同样在用户取消关注时,也可以给用户发送一条信息。
  • bifengmiaozhuan
  • bifengmiaozhuan
  • 2017-12-13 20:54
  • 2771

实现微信订阅号强制关注

实现微信订阅号强制关注,联合关注解决方案
  • dyyaries
  • dyyaries
  • 2016-07-25 09:33
  • 8321

微信公众号开发(一)--公众号关注推送

用户关注公众号回调参考资料 微信公众平台 微信公众号开发文档 基本信息 AppID:开发者ID,微信公众号的唯一标识 AppSecret:开发者密码,操作微信公众号的验证 IP白名单:获取access...
  • qq_26245325
  • qq_26245325
  • 2017-12-13 21:02
  • 4864

微信开发3-------------------------------获得每天用户关注/取关/总人数的统计

package cn.xxxx.utils; import javax.annotation.Resource; import org.codehaus.jettison.json.JSONArr...
  • dmw412724
  • dmw412724
  • 2017-07-10 17:21
  • 385

【wechat】微信开发——微信验证与处理请求(关注后推送消息)

1.这里使用的是一个servlet来完成 代码和步骤如下: CoreServlet.java import java.io.IOException; import java.io.InputStrea...
  • lihuapiao
  • lihuapiao
  • 2015-08-31 18:23
  • 1183
    个人资料
    • 访问:12781次
    • 积分:745
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条