jquery实现点击鼠标左键页面出现文字效果

---

title: jquery实现点击鼠标左键页面出现文字效果
tags: [jquery,鼠标左键事件,文字效果]

---

近几日翻阅博客时发现，很多博客页面会有点击鼠标左键出现文字效果，于是好奇研究了下。

一. 思路解析

根据需求：“点击鼠标左键，出现文字效果“可以得出：

1.首先确定你是不是点的鼠标左键；
2.文字效果要出现在你鼠标点击的地方；
3.点击后文字出现一个由下往上的显示效果；
4.点击完成后固定时间内还得消失

综上，可以分析出实现这个效果的一个大体步骤：
【判断是否为鼠标左键】—>【计算鼠标点击位置的坐标】—>【在点击坐标处添加些许文字】—>【动画实现文字显示效果】—>【固定时间后文字消失】

---

二. 代码实现

根据思路，使用代码实现（步骤详见代码注释）：

【注】如果有其他需求，如：文字颜色渐变、字体样式、鼠标样式等，可自行添加和修改。

---

【后言】
需要现根据要实现的效果分析实现的步骤，再用代码实现
原文链接：煜儿博客