1.案例呈现

用户在页面单击鼠标左键，页面浮现“富强”、“民主”、“文明”、“和谐”、“自由”、“平等”、“公正”、“法治”、“爱国”、“敬业”、“诚信”、“友善”等社会主义核心价值观内容，并向上移动100px，然后消失。案例在Chrome浏览器运行效果，如图8-9所示。

图8-9 案例效果

2.案例分析

用户在页面任意位置单击鼠标左键时，将触发document的点击事件。在事件处理程序中，首先创建一个节点，将节点内容设置为社会主义核心价值观内容中的一个，节点颜色设置为随机值，节点坐标设置为鼠标坐标，然后将新建节点添加至页面中。最后开启定时器，每隔100毫秒改变新创建节点的top属性，当上移距离大于100px时，停止定时器并删除新增节点。

3.案例实现

  1 <script>        2      var a = ["❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"];3      var index = 0;4      document.onclick = function(e) {5          var s = document.createElement('span');         6          s.innerHTML = a[index++ % a.length]; 7          s.style.top = e.clientY + 'px';8          s.style.left = e.clientX + 'px';9          console.log(e.clientX, e.clientY);10          s.style.color = 'rgb(' + 255 * Math.random() + ',' + 255 * Math.random() + ',' + 255 * Math.random() + ')';11        document.body.appendChild(s);12        var t = s.offsetTop;13        var tim = setInterval(function() {14            s.style.top = s.offsetTop - 10 + 'px';15            if (Math.abs(t - s.offsetTop) > 100) {16                clearInterval(tim);17                document.body.removeChild(s);18            }19        }, 100)20    }21</script>

 上述代码中，第13行代码开启定时器，每隔100ms，使新建节点向上移动10px。当上移距离大于100px时，停止定时器并删除新增节点。

---

视频讲解：JavaScript网页特效-浮现社会主义核心价值观内容文字动画效果_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》