JavaScript网页特效-浮现社会主义核心价值观文字动画效果

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前端开发与实例教程（微课视频版）》

JavaScript网页特效-浮现社会主义核心价值观文字动画效果相关推荐

【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
【JS 逆向百例】你没见过的社会主义核心价值观加密
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
PTA 7-189 sdut-sel-while-1 社会主义核心价值观之理解与输出
PTA 7-189 sdut-sel-while-1 社会主义核心价值观之理解与输出社会主义核心价值观是社会主义核心价值体系的内核. 党的十八大提出,倡导富强.民主.文明.和谐,倡导自由.平等.公正 ...
PTA 7-3 sdut-sel-while-1 社会主义核心价值观之理解与输出 (10 分) java AC题解
社会主义核心价值观是社会主义核心价值体系的内核. 党的十八大提出,倡导富强.民主.文明.和谐,倡导自由.平等.公正.法治,倡导爱国.敬业.诚信.友善,积极培育和践行社会主义核心价值观. 富强.民主.文 ...

JavaScript网页特效-浮现社会主义核心价值观文字动画效果

JavaScript网页特效-浮现社会主义核心价值观文字动画效果相关推荐

最新文章

热门文章