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>Onclick</title>
</head>
<style>.body{height: 900px;width: 100%;background-color: black;}
</style>
<body class="body"></body>
<script src="js/jquery.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>