您好,登錄后才能下訂單哦!
小編給大家分享一下js怎么實現(xiàn)鼠標點擊頁面彈出自定義文字效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(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ā)事件 setTimeout(function(){ clearInterval(_timer); elBody.removeChild(el); bombFlag = true; },500); } // 暫停點擊觸發(fā)事件 bombFlag = false; }; })();
以上是“js怎么實現(xiàn)鼠標點擊頁面彈出自定義文字效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。