用原生js实现爱心点赞的功能

最新推荐文章于 2022-10-01 08:38:21 发布

陶718

最新推荐文章于 2022-10-01 08:38:21 发布

阅读量808

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_49428219/article/details/109057938

版权

本文介绍了一段JavaScript代码，通过监听用户点击事件，创建并动态调整绝对定位的图片，实现随机旋转和移动效果。关键函数包括`rag`用于生成随机旋转角度，`showTime`控制图片的透明度、移动和旋转动画。

摘要由CSDN通过智能技术生成

样式

 <style>
        img {
            position: absolute;
        }
    </style>

js部分

<script>
        let imgList = [];
        let timer = null;
        let flag = true;
        document.addEventListener("click", function (e) {
            e.preventDefault();
            let img = document.createElement("img");
            img.src = "1.png";
            img.style.left = (e.clientX - 32) + "px";
            img.style.top = (e.clientY - 32) + "px";

            let str = "rotate(" + rag() + "deg)";
            img.style.transform = str;

            document.body.appendChild(img);

            imgList.push({
                img: img,
                translateX: 0,
                translateY: 0,
                frame: 0,
                opacity: 1
            })

            if (!timer) {
                timer = setInterval(showTime, 60);
            }


        })

        function rag() {
            return parseInt(Math.random() * 90 - 60);
        }

        function showTime() {
            for (let i = 0; i < imgList.length; i++) {
                if (imgList[i].opacity < 0) {
                    imgList[i].img.remove();
                    imgList.splice(i, 1);
                    i--;
                } else {
                    if (imgList[i].frame > 10) {
                        imgList[i].translateY -= 10;
                        imgList[i].opacity -= 0.03;
                        if (flag) {
                            imgList[i].translateX -= 3;
                        } else {
                            imgList[i].translateX += 3;
                        }
                        if (imgList[i].translateX == -30) {
                            flag = false;
                        }
                        if (imgList[i].translateX == 30) {
                            flag = true;
                        }

                        console.log(imgList[i].img.style.transform)
                        let str1 = imgList[i].img.style.transform.split(" ")[0]
                        imgList[i].img.style.transform =
                            `${str1} translate(${imgList[i].translateX}px,${imgList[i].translateY}px)`
                        imgList[i].img.style.opacity = imgList[i].opacity;
                    } else {
                        imgList[i].frame++
                    }
                }
            }
        }
    </script>