title: jquery實(shí)現(xiàn)點(diǎn)擊鼠標(biāo)左鍵頁(yè)面出現(xiàn)文字效果
tags: [jquery,鼠標(biāo)左鍵事件,文字效果]
近幾日翻閱博客時(shí)發(fā)現(xiàn)，很多博客頁(yè)面會(huì)有點(diǎn)擊鼠標(biāo)左鍵出現(xiàn)文字效果，于是好奇研究了下。
一. 思路解析
根據(jù)需求：“點(diǎn)擊鼠標(biāo)左鍵，出現(xiàn)文字效果“可以得出：
1.首先確定你是不是點(diǎn)的鼠標(biāo)左鍵；
2.文字效果要出現(xiàn)在你鼠標(biāo)點(diǎn)擊的地方；
3.點(diǎn)擊后文字出現(xiàn)一個(gè)由下往上的顯示效果；
4.點(diǎn)擊完成后固定時(shí)間內(nèi)還得消失
綜上，可以分析出實(shí)現(xiàn)這個(gè)效果的一個(gè)大體步驟：
【判斷是否為鼠標(biāo)左鍵】—>【計(jì)算鼠標(biāo)點(diǎn)擊位置的坐標(biāo)】—>【在點(diǎn)擊坐標(biāo)處添加些許文字】—>【動(dòng)畫(huà)實(shí)現(xiàn)文字顯示效果】—>【固定時(shí)間后文字消失】
二. 代碼實(shí)現(xiàn)
根據(jù)思路，使用代碼實(shí)現(xiàn)（步驟詳見(jiàn)代碼注釋）：
<!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 = ['富強(qiáng)','民主','文明','和諧','自由','平等','公正','法制','愛(ài)國(guó)','敬業(yè)','誠(chéng)信','友善']
switch(e.which){
//左鍵點(diǎn)擊
case 1:{
//計(jì)算鼠標(biāo)點(diǎn)擊坐標(biāo)
var x = e.originalEvent.x ||e.originalEvent.layerX || 0
var y = e.originalEvent.y ||e.originalEvent.layerY || 0
//隨機(jī)取出文字
var index = Math.floor((Math.random()*arr.length))
var text = arr[index]
//調(diào)用文字顯示函數(shù)
createDiv(x,y,text)
//文字出現(xiàn)后固定時(shí)間內(nèi)消失
$('.newdiv').delay(600).hide(0)
break
}
}
})
function createDiv (x,y,text) {
//文字顏色
var colorArr = [
'red','yellow','green','blue','orange','black'
]
//隨機(jī)取出顏色
var colorIndex = Math.floor((Math.random()*colorArr.length))
var color = colorArr[colorIndex]
//在鼠標(biāo)點(diǎn)擊處創(chuàng)建一個(gè)div用來(lái)顯示文字
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)
//動(dòng)畫(huà)效果
$('.newdiv').animate({top:+ y-35 +'px'})
}
</script>
</html>
【注】如果有其他需求，如：文字顏色漸變、字體樣式、鼠標(biāo)樣式等，可自行添加和修改。
【后言】
需要現(xiàn)根據(jù)要實(shí)現(xiàn)的效果分析實(shí)現(xiàn)的步驟，再用代碼實(shí)現(xiàn)
原文鏈接：煜兒博客
