1.案例呈现
用户在页面单击鼠标左键，页面浮现“富强”、“民主”、“文明”、“和谐”、“自由”、“平等”、“公正”、“法治”、“爱国”、“敬业”、“诚信”、“友善”等社会主义核心价值观内容，并向上移动100px，然后消失。案例在Chrome浏览器运行效果，如图8-9所示。
图8-9 案例效果
2.案例分析
用户在页面任意位置单击鼠标左键时，将触发document的点击事件。在事件处理程序中，首先创建一个节点，将节点内容设置为社会主义核心价值观内容中的一个，节点颜色设置为随机值，节点坐标设置为鼠标坐标，然后将新建节点添加至页面中。最后开启定时器，每隔100毫秒改变新创建节点的top属性，当上移距离大于100px时，停止定时器并删除新增节点。
3.案例实现
1 <script> 2var a = ["❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤", "❤敬业❤", "❤诚信❤", "❤友善❤"];3var index = 0;4document.onclick = function(e) {5var s = document.createElement('span'); 6s.innerHTML = a[index++ % a.length]; 7s.style.top = e.clientY + 'px';8s.style.left = e.clientX + 'px';9console.log(e.clientX, e.clientY);10s.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) {16clearInterval(tim);17document.body.removeChild(s);18 }19 }, 100)20 }21</script>
上述代码中，第13行代码开启定时器，每隔100ms，使新建节点向上移动10px。当上移距离大于100px时，停止定时器并删除新增节点。
视频讲解：JavaScript网页特效-浮现社会主义核心价值观内容文字动画效果_哔哩哔哩_bilibili
源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》
