-
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下
效果:
// ==UserScript== // @name 鼠标点击冒泡 // @namespace https://djzhao.js.org // @version 0.3.1 // @description 一个用JS写的鼠标左击特效 // @author 一碗单炒饭 // @include /[a-zA-z]+://[^\s]*/ // @run-at document_start // @grant unsafeWindow // @grant GM_setClipboard // ==/UserScript== 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 = "( ง ᵒ̌皿ᵒ̌)ง⁼3₌₃"; 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); }; };
在html文件中引入js代码的几种方法
1.在html文件中,添加
<script> alert("test");</script>
2.在html文件同级目录下,新建一个test.js文件,
在test.js文件写入:
alert("test");
在html文件引入test.js里面的代码
<script src="01.js"></script>
来源:酷米社区(关注电脑技术和资源分享的博客)转载请保留此处和链接!
地址:http://www.kumi6.com/?id=169
js实现鼠标点击页面弹出自定义文字效果
391人参与 |分类: 网页代码|时间:2020年02月25日 18:28
相关文章阅读更多:JS代码 冒泡 引用代码
- 2020-02-25鼠标点击显示 爱心JS代码
- 2019-04-04如何在一个网页中嵌套调用另一个网页
- 2019-03-10html网页中如何调用另一个html网页的一部分
发表评论酷米社区