This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

BattleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if you need to reprint can contact the author authorization

background

Double click on the like animation: Refers to a finger click on two specific areas, will automatically complete the thumb up operations, the animation in the desktop is not common, because we can use the precise click of the mouse on the desktop end to point button, as long as one click can complete the thumb up operations, double-click the thumb up Seem to be small, but since the 4 g era, mobile terminal equipment increased dramatically, However, mobile devices used to be in the era of small screens. The “like” button was too big to block the view easily, and too small to be easy to accurately click. Therefore, many enterprises adopted the way of double-clicking “like” to achieve a better interactive experience, among which Douyin, owned by Bytedance, should be one of the most mature software for using double-clicking “like”. So today we’re going to look at how it’s implemented in code.

The final result

Import the Font Awesome icon library

<script src="https://use.fontawesome.com/ab349f0a54.js" ></script>
Copy the code

Add HTML files

<h3>Double click on the image to <i class="fa fa-heart"></i> it</h3>
<small>You liked it <span id="times">0</span> times</small>   
<div class="loveMe"></div>
Copy the code

Add a CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyTo center the project
* {
  box-sizing: border-box;
}
body {
    text-align: center;
    overflow: hidden;
    margin: 0;
}
Copy the code

The main CSS code

h3 {
    margin-bottom: 0;
    text-align: center;
}

small {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.fa-heart {
    color: red;
}

.loveMe {
    height: 440px;
    width: 300px;
    background: url('https://images.hdqwalls.com/download/lisa-blackpink-4k-mg-1920x1080.jpg') no-repeat center center/cover;
    margin: auto;
    cursor: pointer;
    max-width: 100%;
    position: relative;
    box-shadow: 0 14px 28px rgba(0.0.0.0.25), 0 10px 10px rgba(0.0.0.0.22);
    overflow: hidden;
}

.loveMe .fa-heart {
    position: absolute;
    animation: grow 0.6 s linear;
    transform: translate(-50%, -50%) scale(0);
}

@keyframes grow {
    to {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0; }}Copy the code

Add JS file

The main logic

const loveMe = document.querySelector('.loveMe')
const times = document.querySelector('#times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click'.(e) = > {
    if (clickTime === 0) {
        clickTime = new Date().getTime()
    } else {
        if ((new Date().getTime() - clickTime) < 800) {
            createHeart(e)
            clickTime = 0
        } else {
            clickTime = new Date().getTime()
        }
    }
})

const createHeart = (e) = > {
    const heart = document.createElement('i')
    heart.classList.add('fa')
    heart.classList.add('fa-heart')

    const x = e.clientX
    const y = e.clientY

    const leftOffset = e.target.offsetLeft
    const topOffset = e.target.offsetTop

    const xInside = x - leftOffset
    const yInside = y - topOffset

    heart.style.top = `${yInside}px`
    heart.style.left = `${xInside}px`

    loveMe.appendChild(heart)

    times.innerHTML = ++timesClicked

    setTimeout(() = > heart.remove(), 1000)}Copy the code

❤️ Thank you all

If this post is helpful to you, give it a thumbs-up. Your thumbs-up are my motivation.

If you like this post, you can “like” + “bookmark” + “forward” to more friends.