title: jquery实现点击鼠标左键页面出现文字效果
tags: [jquery,鼠标左键事件,文字效果]
近几日翻阅博客时发现，很多博客页面会有点击鼠标左键出现文字效果，于是好奇研究了下。
一. 思路解析
根据需求：“点击鼠标左键，出现文字效果“可以得出：
1.首先确定你是不是点的鼠标左键；
2.文字效果要出现在你鼠标点击的地方；
3.点击后文字出现一个由下往上的显示效果；
4.点击完成后固定时间内还得消失
综上，可以分析出实现这个效果的一个大体步骤：
【判断是否为鼠标左键】—>【计算鼠标点击位置的坐标】—>【在点击坐标处添加些许文字】—>【动画实现文字显示效果】—>【固定时间后文字消失】
二. 代码实现
根据思路，使用代码实现（步骤详见代码注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>click</title>
</head>
<style>
.body{
height: 900px;
width: 100%;
background-color: pink;
}
</style>
<body class="body">
</body>
<script src="./jquery-3.1.1.min.js"></script>
<script>
$(".body").mousedown(function(e){
var arr = ['富强','民主','文明','和谐','自由','平等','公正','法制','爱国','敬业','诚信','友善']
switch(e.which){
//左键点击
case 1:{
//计算鼠标点击坐标
var x = e.originalEvent.x ||e.originalEvent.layerX || 0
var y = e.originalEvent.y ||e.originalEvent.layerY || 0
//随机取出文字
var index = Math.floor((Math.random()*arr.length))
var text = arr[index]
//调用文字显示函数
createDiv(x,y,text)
//文字出现后固定时间内消失
$('.newdiv').delay(600).hide(0)
break
}
}
})
function createDiv (x,y,text) {
//文字颜色
var colorArr = [
'red','yellow','green','blue','orange','black'
]
//随机取出颜色
var colorIndex = Math.floor((Math.random()*colorArr.length))
var color = colorArr[colorIndex]
//在鼠标点击处创建一个div用来显示文字
newDiv = $("<div></div>")
newDiv.css({
'position':'absolute',
'width':'40px',
'height':'30px',
'left': x-15 + 'px',
'top': + y-20 +'px',
'text-align':'center',
'color':color
})
newDiv.addClass('newdiv')
$('.body').html(newDiv)
$('.newdiv').html(text)
//动画效果
$('.newdiv').animate({top:+ y-35 +'px'})
}
</script>
</html>
【注】如果有其他需求，如：文字颜色渐变、字体样式、鼠标样式等，可自行添加和修改。
【后言】
需要现根据要实现的效果分析实现的步骤，再用代码实现
原文链接：煜儿博客
