👦

 

jquery实现鼠标点击显示文字上浮效果

##功能效果图如下

##功能代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.0.min.js"></script>
<title></title>
<style>
body{
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>

<script>
$(function(){
//鼠标点击显示文字上浮效果
var click_count=0;
$(document).click(function(e){
var text=new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
// var text = str.split(",");
var color=new Array(//颜色数组
"#C01E22",
"#0088cc",
"#FF5E52",
"#2CDB87",
"#00D6AC",
"#EA84FF",
"#FDAC5F",
"#FD77B2",
"#0DAAEA",
"#C38CFF",
"#FF926F",
"#8AC78F",
"#C7C183",
"#9370DB",
"#2f889a",
"#9e5ae2");
var n=Math.floor(Math.random()*color.length+1)-1;
click_count=(click_count+1)%text.length;
var $i=$("<span>").text(text[click_count]);
var x=e.pageX,y=e.pageY;//鼠标点击坐标
$i.css({
"position":"absolute",
"z-index":"10000",
"top":y-15,
"left":x,
"color":color[n],
"font-size":"14px",
"font-weight":"700",
"cursor":"default"
});
$("body").append($i);
$i.animate({
"top":y-180,//纵向偏移量
"opacity":"0"},2000,function(){
$i.remove();//移除显示的文字
});
e.stopPropagation();//防止冒泡})
});
});
</script>
</body>
</html>