js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果
更新時間:2019年12月24日 09:55:41 作者:here962464
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js鼠標(biāo)點擊頁面彈出文字的具體代碼,供大家參考,具體內(nèi)容如下
效果:

實現(xiàn)代碼:
(function(e){
// 點擊事件觸發(fā)生生元素等一系列動作的初始狀態(tài)
var bombFlag = true;
// body節(jié)點
var elBody = document.getElementsByTagName("body")[0];
// 初始化文字?jǐn)?shù)組下標(biāo)
var a_idx = 0;
elBody.onclick = function(e) {
if(bombFlag){
// 坐標(biāo)
var ev = e||event,// IE瀏覽器兼容
x = ev.clientX,
y = ev.clientY;
// 隨機(jī)產(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;
// 文字?jǐn)?shù)組
var a = new Array("樂觀", "❤" ,"積極", "向上", "自由", "正能量","(*^▽^*)", "元氣滿滿", "開心" ,"快樂", "善良", "可愛", "暴富", "暴瘦","❤");
// 創(chuàng)建節(jié)點
var elSpan = document.createElement("span");
// 隨機(jī)節(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;
};
})();
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS基于正則表達(dá)式的替換操作(replace)用法示例
這篇文章主要介紹了JS基于正則表達(dá)式的替換操作(replace)用法,結(jié)合具體實例形式詳細(xì)分析了replace函數(shù)的語法、參數(shù)及具體使用技巧,需要的朋友可以參考下2017-04-04
JavaScript原始數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型,用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用,需要的可以參考一下2022-11-11
ES6模塊化的import和export用法方法總結(jié)
這篇文章主要介紹了ES6模塊化的import和export用法方法總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08

