小編給大家分享一下js怎么實現(xiàn)鼠標點擊頁面彈出自定義文字效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)廣安,十載網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

具體內(nèi)容如下

效果：

實現(xiàn)代碼：

(function(e){
 // 點擊事件觸發(fā)生生元素等一系列動作的初始狀態(tài)
 var bombFlag = true;
 // body節(jié)點
 var elBody = document.getElementsByTagName("body")[0];
 // 初始化文字數(shù)組下標
 var a_idx = 0;
 elBody.onclick = function(e) {
 if(bombFlag){
  // 坐標
  var ev = e||event,//  IE瀏覽器兼容
  x = ev.clientX,
     y = ev.clientY;
   // 隨機產(chǎn)生文字顏色
  var color1 = Math.floor((Math.random()*255));
  var color2 = Math.floor((Math.random()*255));
  var color3 = Math.floor((Math.random()*255));
  // 初始化定時器
   var _timer = null;
   // 文字數(shù)組
   var a = new Array("樂觀", "?" ,"積極", "向上", "自由", "正能量","(*^▽^*)", "元氣滿滿", "開心" ,"快樂", "善良", "可愛", "暴富", "暴瘦","?");
   // 創(chuàng)建節(jié)點
   var elSpan = document.createElement("span");
   // 隨機節(jié)點內(nèi)容
   a_idx = (a_idx + 1) % a.length;
   // 添加內(nèi)容到節(jié)點
   elSpan.innerHTML = a[a_idx];
   // 初始節(jié)點化樣式
   elSpan.style.zIndex = 999;
   elSpan.style.position = "fixed";
   elSpan.style.top = y -20 + "px",
   elSpan.style.left = x -10 + "px";
   elSpan.style.color = 'rgb('+color1+','+color2+','+color3+')';
   elSpan.style.fontWeight = "bold";
   elSpan.className = "floatSpan";
   // 將元素追加到body中
   elBody.appendChild(elSpan);
   // 獲取追加后的節(jié)點
   var el = document.getElementsByClassName("floatSpan")[0];
   // 初始化需要漸變的變量值
   // top值
   var cur_y = y - 20;
   // 透明度
   var cur_opacity = 1;
   // 字體大小
   var cur_fontSize = 14;
   // 創(chuàng)建定時器
   _timer = setInterval(function(){
    // 漸變變量
    cur_y += -10;
    cur_opacity -= 0.1;
    cur_fontSize += 1;
    // 漸變變量賦值（因為有單位的關(guān)系 所以不能直接加減 通過中間變量來賦值）
    el.style.top = cur_y + "px";
    el.style.opacity = cur_opacity;
    el.style.fontSize = cur_fontSize + "px";
   },50);
   // 時間到了之后清空定時器 清除剛才添加的元素 并且恢復(fù)點擊觸發(fā)事件
   setTimeout(function(){
    clearInterval(_timer);
    elBody.removeChild(el);
    bombFlag = true;
   },500);
 }
 // 暫停點擊觸發(fā)事件
   bombFlag = false;
 };
})();

以上是“js怎么實現(xiàn)鼠標點擊頁面彈出自定義文字效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：js怎么實現(xiàn)鼠標點擊頁面彈出自定義文字效果
網(wǎng)站URL：http://www.ekvhdxd.cn/article20/jecdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)網(wǎng)站制作、網(wǎng)站維護、靜態(tài)網(wǎng)站、網(wǎng)站收錄、面包屑導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)