实现鼠标点击上飘字体的效果 发表于 2019-11-26 | 更新于 2022-10-17 | 分类于 web | 字数统计 291 | 阅读时长 1 分 使用JavaScript实现鼠标点击时出现上漂字体的效果。不信的话你点点试试看?这里是富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善~ 前言 正如你所见,这个网站上使用了JS实现了鼠标点击上漂字体的功能。 如何实现 实现起来很简单,只需要在页面上添加以下代码即可。我比较推荐放在<body>标签的尾部。 1234567891011121314151617181920212223242526272829<script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { $("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> 本文作者: 王政乔 本文链接: https://www.zhengqiao.wang/web/%E5%AE%9E%E7%8E%B0%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E4%B8%8A%E9%A3%98%E5%AD%97%E4%BD%93%E7%9A%84%E6%95%88%E6%9E%9C.html 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC 4.0 许可协议。转载请注明出处! 温馨提示: 本站使用Github Page提供服务,资源均依托于开源仓库,如果你无法正常访问Github资源则可能导致部分图片或内容无法正常显示。