关于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);});