<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js点击屏幕出现文字</title> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> //定义获取词语下标 var a_idx = 0; jQuery(document).ready(function($) { //点击body时触发事件 $("body").click(function(e) { //需要显示的词语 var a = new Array("苍井空","波多野结衣", "新垣结衣", "吉泽明步","石原里美", "桥本环奈", "中森明菜","桃谷绘里香", "西野七濑", "明日花绮罗","小泽玛利亚", "麻生希","大桥未久", "冲田杏梨", "花泽香菜","苍井优", "饭岛爱", "绫濑遥","泽尻绘里香", "松岛枫"); //设置词语给span标签 var $i = $("<span/>").text(a[a_idx]); //下标等于原来下标+1 余 词语总数 a_idx = (a_idx + 1)% a.length; //获取鼠标指针的位置，分别相对于文档的左和右边缘。 //获取x和y的指针坐标 var x = e.pageX, y = e.pageY; //在鼠标的指针的位置给$i定义的span标签添加css样式 $i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999, "top" : y - 20, "left" : x, "position" : "absolute", "font-weight" : "bold", "color" : "#ff6651" }); //在body添加这个标签 $("body").append($i); //animate() 方法执行 CSS 属性集的自定义动画。 //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。 //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp $i.animate({ //将原来的位置向上移动180 "top" : y - 180, "opacity" : 0 //1500动画的速度 }, 1500, function() { //时间到了自动删除 $i.remove(); }); }); }); </script> </head> <body style="height: 1080px"> </body> </html>