前端小项目3 # DoubleClickHeart 双击图片产生爱心动效

涉及知识点

1. 鼠标事件
2. JavaScript操作DOM节点
3. 闭包
4. HTML中鼠标点击的位置信息
5. animation 动画
6. 引入图标字体库

介绍

双击图片，在点击处显示爱心动画效果并更新累计点击次数。

代码

HTML:

<div class="content">
     <p>you licked it <span id="click-num">0</span> times</p>
     <div class="current-photo">
     </div>
 </div>

css :
需要引入外部图标字体库

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

        .content{
            margin: 0 auto;  
            width: 300px;    
            text-align: center;
        }
        .current-photo{
            background-image:url('https://picsum.photos/250/400');
            width: 250px;
            height: 400px;
            margin: 0 auto; 
            cursor: pointer;
            user-select:none;
        }
        .heart{
            color:red;
            position: absolute;
            animation: grow 0.6s linear;
            transform: translate(-50%,-50%) scale(0);
        }

        @keyframes grow {
            to {
                transform: translate(-50%,-50%) scale(5);
                opacity: 0;
            }
        }

JavaScript：

let addNum = incrementOne(event)
        let currentDiv = document.querySelector(".current-photo")
        let clickNum = document.querySelector('#click-num')
        currentDiv.addEventListener("dblclick",()=>{
            let e = event || window.event
            // 创建节点
            let heart = document.createElement("i")
            currentDiv.appendChild(heart)
            // 使用图标库爱心样式，设置偏移量
            heart.className = "heart fa fa-heart"
            heart.style.left = e.clientX+"px"
            heart.style.top = e.clientY+"px"
            // 点击数目加1
            clickNum.innerHTML = addNum()
            // 删除爱心节点
            setTimeout(()=>{
                heart.remove()
            },1000)
        })
        function incrementOne(){
            let i = 0
            return ()=>{
                return ++i
            }
        }