鼠标点击显示冒泡文字

谁践踏了优雅 2022-05-29 06:57 316阅读 0赞

逛网站的时候遇到一个有趣的鼠标点击事件：  
![这里写图片描述][Image 1]  
点击鼠标会有 文字不显示 ，上漂一定时间后消失。

现记录作为收藏

具体代码：

(function() { var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"] , index = Math.floor(Math.random() * coreSocialistValues.length); document.body.addEventListener('click', function(e) { if (e.target.tagName == 'A') { return; } var x = e.pageX , y = e.pageY , span = document.createElement('span'); span.textContent = coreSocialistValues[index]; index = (index + 1) % coreSocialistValues.length;//取模循环 span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ', y - 20, 'px; left: ', x, 'px;'].join(''); document.body.appendChild(span); animate(span); }); function animate(el) {//动画 var i = 0 , top = parseInt(el.style.top) , id = setInterval(frame, 16.7); function frame() {//帧 if (i > 180) { clearInterval(id); el.parentNode.removeChild(el); } else { i += 2; el.style.top = top - i + 'px'; el.style.opacity = (180 - i) / 180; } } } }());

[代码来源][Link 1]

## 思考 ##

做个鼠标点击后显示一个爱心的绘制动画？

[Image 1]: 
[Link 1]: https://www.waitig.com/div%E5%B1%82%E8%B0%83%E6%95%B4z-index%E5%B1%9E%E6%80%A7%E6%97%A0%E6%95%88%E5%8E%9F%E5%9B%A0%E5%88%86%E6%9E%90%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95.html

发表评论取消回复

表情：

评论列表（有 0 条评论，316人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击网页出现文字

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runa

港控/mmm°/ 2023年10月02日 03:27/ 0 赞/ 22 阅读

相关 js点击屏幕出现文字

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js点击屏幕出现

电玩女神/ 2023年08月17日 16:24/ 0 赞/ 158 阅读

相关鼠标悬浮显示文字，右击图片复制该文字

右击图片复制id 右击图片复制id 鼠标悬浮显示文字图片方法效果右击图片复制id 鼠标悬浮显

男娘i/ 2023年01月21日 09:23/ 0 赞/ 13 阅读

相关禁止鼠标多次点击选中div中的文字

来源：[http://www.cnblogs.com/myjiejie/archive/2010/12/04/1896327.html][http_www.cnblogs.co

雨点打透心脏的1/2处/ 2022年06月18日 06:45/ 0 赞/ 246 阅读

相关 Javascript 鼠标点击冒泡特效

一个用JS写的鼠标左击特效点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”… 常用Emoji 可以自行替换，如需复制，请从底部链接移步至Git

灰太狼/ 2022年06月14日 00:49/ 0 赞/ 238 阅读

相关鼠标点击不选中文字

前言：经常遇见很讨厌的事情，就是在鼠标双击或者连续单击的时候会选中问题，这次在做图片滚动的时候，左边采用了<，没有采用图片，在用户连续点击的时候就会选中这个箭头，用户体验非常

╰半夏微凉°/ 2022年06月05日 08:51/ 0 赞/ 318 阅读

相关鼠标点击显示冒泡文字

逛网站的时候遇到一个有趣的鼠标点击事件： ![这里写图片描述][Image 1] 点击鼠标会有文字不显示，上漂一定时间后消失。现记录作为收藏具体代码：

谁践踏了优雅/ 2022年05月29日 06:57/ 0 赞/ 317 阅读

相关基于js原生封装的点击显示完整文字

基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s =

柔光的暖阳◎/ 2022年03月31日 12:16/ 0 赞/ 284 阅读

相关鼠标点击显示文字效果

需引入jquery.js jQuery(document).ready(function($) { $("html,body").click(fun

柔情只为你懂/ 2022年01月14日 13:09/ 0 赞/ 377 阅读

相关鼠标点击特效·爱心❤和文字

> 爱心特效❤ <script type="text/javascript"> / 网页鼠标点击特效（爱心）/ !fu

末蓝、/ 2021年09月23日 16:30/ 0 赞/ 344 阅读