Javascript实现鼠标点击冒泡特效
本文实例为大家分享了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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
上一篇:vue实现分页加载效果
栏 目:JavaScript
下一篇:JS实现图片切换特效
本文标题:Javascript实现鼠标点击冒泡特效
本文地址:https://www.xiuzhanwang.com/a1/JavaScript/9409.html
您可能感兴趣的文章
- 04-02javascript潜力,javascript强大吗
- 04-02javascript点线,点线的代码
- 04-02javascript移出,js 移入移出
- 04-02javascript替换字符串,js字符串的替换
- 04-02包含javascript舍的词条
- 04-02javascript匿名,js匿名方法
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript警报,JavaScript警告
- 04-02javascript前身,javascript的前身
- 04-02javascript遮盖,JavaScript遮盖PC端页面
阅读排行
本栏相关
- 04-02javascript点线,点线的代码
- 04-02javascript潜力,javascript强大吗
- 04-02javascript替换字符串,js字符串的替换
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的词条
- 04-02javascript并行,深入理解并行编程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警报,JavaScript警告
- 04-02javascript遮盖,JavaScript遮盖PC端页面
- 04-02javascript前身,javascript的前身
随机阅读
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10C#中split用法实例总结
- 01-11ajax实现页面的局部加载
- 04-02jquery与jsp,用jquery
- 01-10SublimeText编译C开发环境设置
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 08-05dedecms(织梦)副栏目数量限制代码修改