如何用JavaScript编写鼠标点击产生冒泡动画效果？

本文共计599个文字，预计阅读时间需要3分钟。

本示例展示了如何用JavaScript编写鼠标点击特效的代码，以下是一段参考代码：

javascript// 鼠标左键点击特效document.addEventListener('click', function(e) { if (e.button===0) { // 显示红心或字符表情 var redHeart='💖'; // 或其他字符表情 var emoji='😍';

// 创建并显示特效元素 var effect=document.createElement('div'); effect.innerText=redHeart; // 或 emoji effect.style.position='absolute'; effect.style.left=e.pageX + 'px'; effect.style.top=e.pageY + 'px'; effect.style.color='red'; effect.style.fontWeight='bold'; document.body.appendChild(effect);

// 延迟移除特效元素 setTimeout(function() { document.body.removeChild(effect); }, 1000); }});

此代码将在页面任何位置鼠标左键点击时，显示一个红心或指定字符表情，持续1秒后消失。您可以根据需要替换红心或其他表情，以适应不同的设计需求。

本文实例为大家分享了js鼠标点击冒泡的具体代码，供大家参考，具体内容如下

一个用JS写的鼠标左击特效

点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”…

常用Emoji

可以自行替换，如需复制，请从底部链接移步至Github

代码

onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $body = document.getElementsByTagName("body")[0]; $html.onclick = function(e) { var $elem = document.createElement("b"); $elem.style.color = "#E94F06"; $elem.style.zIndex = 9999; $elem.style.position = "absolute"; $elem.style.select = "none"; var x = e.pageX; var y = e.pageY; $elem.style.left = (x - 10) + "px"; $elem.style.top = (y - 20) + "px"; clearInterval(anim); switch (++click_cnt) { case 10: $elem.innerText = "OωO"; break; case 20: $elem.innerText = "(๑•́ ∀ •̀๑)"; break; case 30: $elem.innerText = "(๑•́ ₃ •̀๑)"; break; case 40: $elem.innerText = "(๑•̀_•́๑)"; break; case 50: $elem.innerText = "（￣へ￣）"; break; case 60: $elem.innerText = "(╯°口°)╯(┴—┴"; break; case 70: $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა"; break; case 80: $elem.innerText = "╮(｡>口<｡)╭"; break; case 90: $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃"; break; case 100: case 101: case 102: case 103: case 104: case 105: $elem.innerText = "(ꐦ°᷄д°᷅)"; break; default: $elem.innerText = "❤"; break; } $elem.style.fontSize = Math.random() * 10 + 8 + "px"; var increase = 0; var anim; setTimeout(function() { anim = setInterval(function() { if (++increase == 150) { clearInterval(anim); $body.removeChild($elem); } $elem.style.top = y - 20 - increase + "px"; $elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); }; };

预览

Github地址：JSClickBubble

更多JavaScript精彩特效分享给大家：

Javascript菜单特效大全

javascript仿QQ特效汇总

JavaScript时钟特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。