关于javascript:js实现点击任意位置文字动画效果

注：IE9 及其以下浏览器无成果。

<style>
        .text-popup {
            animation: textPopup 1s;
            color: red;
            user-select: none;
            white-space: nowrap;
            position: absolute;
            z-index: 99;
        }

        @keyframes textPopup {

            0%,
            100% {opacity: 0;}

            5% {opacity: 1;}

            100% {transform: translateY(-50px);
            }
        }
    </style>

<script>
        var fnTextPopup = function (arr, options) {
            // arr 参数是必须的
            if (!arr || !arr.length) {return;}
            // 主逻辑
            var index = 0;
            document.documentElement.addEventListener('click', function (event) {
                var x = event.pageX, y = event.pageY;
                var eleText = document.createElement('span');
                eleText.className = 'text-popup';
                this.appendChild(eleText);
                if (arr[index]) {eleText.innerHTML = arr[index];
                } else {
                    index = 0;
                    eleText.innerHTML = arr[0];
                }
                // 动画完结后删除本人
                eleText.addEventListener('animationend', function () {eleText.parentNode.removeChild(eleText);
                });
                // 地位
                eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
                eleText.style.top = (y - eleText.clientHeight) + 'px';
                // index 递增
                index++;
            });
        };

        fnTextPopup(['富强', '专制', '文化', '谐和', '自在', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
    </script>

点击页面呈现文字动画成果实现原理

DOM 工夫的 event 对象中有个 pageX 和pageY能够获取到点击事件产生时候事件发生源绝对于页面左上角的程度间隔和垂直距离。对于鼠标点击事件，则对应鼠标绝对于页面左上角的间隔，因而，咱们只有把文字内容定位到这个点击地位偏上一点地位就能够了。

而后，配合 CSS3 animation，写一个往上淡出成果就能够了。

当文字元素插入到页面的时候，动画会主动执行。

为了避免文字元素一直创立，占用不必要的资源，咱们能够借助 animationend 事件实现动画完结的时候主动删除创立的文字元素。

ele.addEventListener('animationend', function () {ele.parentNode.removeChild(ele);
});