Jquery鼠标点击出现文字
生活随笔
收集整理的這篇文章主要介紹了
Jquery鼠标点击出现文字
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
點擊鼠標左鍵出現(xiàn)文字效果。
原理解說
1.首先確定你是不是點的鼠標左鍵；
2.文字效果要出現(xiàn)在你鼠標點擊的地方；
3.點擊后文字出現(xiàn)一個由下往上的顯示效果；
4.點擊完成后固定時間內(nèi)還得消失
效果演示
代碼演示
<!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]//調(diào)用文字顯示函數(shù)createDiv(x,y,text)//文字出現(xiàn)后固定時間內(nèi)消失$('.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]//在鼠標點擊處創(chuàng)建一個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>總結
以上是生活随笔為你收集整理的Jquery鼠标点击出现文字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python wechatpay微信支付
- 下一篇： SpringBoot多环境配置与使用