[Front End Development Example] HTML CSS - WeChat Suspended Guided Concern - (6)

Question.Question

The first page of WeChat Shop produces a two-dimensional code to guide the attention of public numbers, which can play a very important role in the drainage of public numbers.In general, two-dimensional codes in stores are pushed passively according to some logic, such as those who have not paid attention to the public number, jump out of a two-dimensional code when they first enter the store; the other is that the user actively clicks a button to trigger the display of the two-dimensional code, which is a little like AssistiveTouch on the Apple mobile phone.

Solution.Solution

HTML section:

<!-- Trigger button -->
<div class="alert-click" id="alert-click"></div>

<!-- Transparent grey layer at bottom -->
<div class='mask'></div>
<!-- Two-dimensional code layer -->
<div class='board'>
    <div class="logo"><span>Demanecan</span></div>
    <div class='qrcode'><img src='images/qrcode.jpg'></div>
    <div class="heart"><span>follow</span></div>
    <div class='text'>Focus on public numbers by long QR code</div>
</div>

The HTML part mainly builds trigger button and two-dimensional code part. The two-dimensional code part consists of two layers, a transparent gray layer at the bottom and a two-dimensional code layer at the bottom.

CSS section:

/* Trigger button */
.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;
}

/* Transparent grey layer */
.mask { 
    position: fixed; top: 0; left: 0; z-index: 998; 
    width: 100%; height: 100%; display: none;
    background-color: #000; opacity: 0.5; overflow: hidden;
}

/* Two-dimensional code layer */
.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;
}

The main techniques used in CSS are display, position, z-index, opacity, and several important styles for typesetting.

JS section:

<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>

Add the interaction between display and hiding of several parts.

Effection.Effect

Tags: QRCode Mobile Javascript

Posted on Thu, 14 May 2020 10:08:14 -0700 by Canadiengland