js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果
更新時間:2019年12月24日 09:55:41 作者:here962464
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁面彈出自定義文字效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js鼠標(biāo)點(diǎn)擊頁面彈出文字的具體代碼,供大家參考,具體內(nèi)容如下
效果:
實(shí)現(xiàn)代碼:
(function(e){ // 點(diǎn)擊事件觸發(fā)生生元素等一系列動作的初始狀態(tài) var bombFlag = true; // body節(jié)點(diǎn) 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("樂觀", "❤" ,"積極", "向上", "自由", "正能量","(*^▽^*)", "元?dú)鉂M滿", "開心" ,"快樂", "善良", "可愛", "暴富", "暴瘦","❤"); // 創(chuàng)建節(jié)點(diǎn) var elSpan = document.createElement("span"); // 隨機(jī)節(jié)點(diǎn)內(nèi)容 a_idx = (a_idx + 1) % a.length; // 添加內(nèi)容到節(jié)點(diǎn) elSpan.innerHTML = a[a_idx]; // 初始節(jié)點(diǎn)化樣式 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é)點(diǎn) 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; // 漸變變量賦值(因?yàn)橛袉挝坏年P(guān)系 所以不能直接加減 通過中間變量來賦值) el.style.top = cur_y + "px"; el.style.opacity = cur_opacity; el.style.fontSize = cur_fontSize + "px"; },50); // 時間到了之后清空定時器 清除剛才添加的元素 并且恢復(fù)點(diǎn)擊觸發(fā)事件 setTimeout(function(){ clearInterval(_timer); elBody.removeChild(el); bombFlag = true; },500); } // 暫停點(diǎn)擊觸發(fā)事件 bombFlag = false; }; })();
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動切換-點(diǎn)擊左右按鈕切換特效代碼
- js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框自動選中內(nèi)容的方法
- js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動跳轉(zhuǎn)頁面
- javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊生成文字特效
- Javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊冒泡特效
- javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件
- JavaScript代碼模擬鼠標(biāo)自動點(diǎn)擊事件示例
相關(guān)文章
aspx中利用js實(shí)現(xiàn)確認(rèn)刪除代碼
在一些程序開發(fā)中,對于刪除操作,最好再讓用戶確認(rèn)一下,以免誤操作,帶來的損失,下面的方法,大家可以參考下。各個語言下,都通用的思路。2010-07-07關(guān)聯(lián)的Select,可以支持客戶端動態(tài)更新
關(guān)聯(lián)的Select,可以支持客戶端動態(tài)更新...2006-09-09javascript利用控件對windows的操作實(shí)現(xiàn)原理與應(yīng)用
假如要發(fā)送漢字的聊天框的內(nèi)容的話,我們也要從windows消息機(jī)制下手,先找到聊天消息的句柄(可以利用findwindow函數(shù)或者用spy工具哈),然后在找到上面的聊天框的句柄,接著我們就可以想這個句柄發(fā)送WM_SETTEXT的消息了2012-12-12