鼠标点击特效

最新推荐文章于 2024-07-21 17:36:42 发布

qq_45670012

最新推荐文章于 2024-07-21 17:36:42 发布

阅读量238

点赞数

分类专栏：前端文章标签： h5

原文链接：https://www.mk2048.com/blog/blog.php?id=hh00b10biiib&title=%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%89%B9%E6%95%88

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

展示：

    (function() {

        window.onclick = function(event) {

            var heart = document.createElement("b");

            heart.onselectstart = new Function('event.returnValue=false');

            document.body.appendChild(heart).innerHTML = "❤";

            heart.style.cssText = "position: fixed;left:-100%;";

            var f = 16, // 字体大小
                x = event.clientX - f / 2, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 1.2; // 放大缩小

            var timer = setInterval(function() {

                if (a <= 0) {

                    document.body.removeChild(heart);

                    clearInterval(timer);

                } else {

                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:"   c   ";left:"   x   "px;top:"   y   "px;opacity:"   a   ";transform:scale("   s   ");";

                    y--;
                    a -= 0.016;
                    s  = 0.002;

                }

            }, 12)

        }

        // 随机颜色
        function randomColor() {

            return "rgb("   (~~(Math.random() * 255))   ","   (~~(Math.random() * 255))   ","   (~~(Math.random() * 255))   ")";

        }

    }())