一段有趣的HTML鼠标特效代码

百科大全

更新时间：2025-10-05 10:48:2052

admin管理员组
文章数量:1794759

一段有趣的HTML鼠标特效代码

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="commonblogs/scripts/jquery-2.2.0.min.js"></script> <script src="/js/blog-common.min.js?v=mbEe3Az_jUnvf0dhJJauM1ytmlVze1bpTwpfUNrPceQ"></script> </head> <body>  <script src="filesblogs/files/wkfvawl/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>  <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { //将打赏附到指定位置 $("#page_begin_html").insertAfter('#cnblogs_post_body'); //鼠标点击特效 $("body").click(function(e) { var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> </body> </html>

特效结果演示如下图：

当然，文字内容可自定义。

本文标签：鼠标有趣特效代码 html

版权声明：本文标题：一段有趣的HTML鼠标特效代码内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686633905a88813.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。