【JS】js实现点击任意位置文字动画效果

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

【JS】js实现点击任意位置文字动画效果

<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可以获取到点击事件发生时候事件发生源相对于页面左上角的水平距离和垂直距离。对于鼠标点击事件，则对应鼠标相对于页面左上角的距离，因此，我们只要把文字内容定位到这个点击位置偏上一点位置就可以了。

然后，配合CSS3animation，写一个往上淡出效果就可以了。

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

为了防止文字元素不断创建，占用不必要的资源，我们可以借助animationend事件实现动画结束的时候自动删除创建的文字元素。

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

以上是 【JS】js实现点击任意位置文字动画效果 的全部内容， 来源链接： utcz.com/a/91662.html

回到顶部