效果展示:
![](https://i-blog.csdnimg.cn/blog_migrate/67b35cbcbdb55ae77410480e497f5107.gif)
源码展示:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击弹出文字特效</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
#content {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="content">
<h3>试着点击空白处——查看你的女朋友</h3>
<span></span>
</div>
<script>
var a_idx = 0;
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var a = new Array("苏菲·玛索", "奥黛丽·赫本", "莫尼卡·贝鲁奇", "凯瑟琳·泽塔-琼斯", "艾玛·罗伯茨", "伊莎贝尔·阿佳妮", "丽芙·泰勒", "黑寡妇", "如花", "石榴姐", "五姑娘", "单身到老");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#81c300"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function () {
$i.remove();
});
});
});
</script>
<pre style="color:red">
感: 最近贡献一下我在教学中的小案例 希望能给你一些帮助
--王
</pre>
</body>
</html>