js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果
本文實(shí)例為大家分享了js鼠標(biāo)點(diǎn)擊頁(yè)面彈出文字的具體代碼,供大家參考,具體內(nèi)容如下
效果:
實(shí)現(xiàn)代碼:
(function(e){ // 點(diǎn)擊事件觸發(fā)生生元素等一系列動(dòng)作的初始狀態(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)); // 初始化定時(shí)器 var _timer = null; // 文字?jǐn)?shù)組 var a = new Array("樂(lè)觀", "❤" ,"積極", "向上", "自由", "正能量","(*^▽^*)", "元?dú)鉂M(mǎn)滿(mǎn)", "開(kāi)心" ,"快樂(lè)", "善良", "可愛(ài)", "暴富", "暴瘦","❤"); // 創(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)建定時(shí)器 _timer = setInterval(function(){ // 漸變變量 cur_y += -10; cur_opacity -= 0.1; cur_fontSize += 1; // 漸變變量賦值(因?yàn)橛袉挝坏年P(guān)系 所以不能直接加減 通過(guò)中間變量來(lái)賦值) el.style.top = cur_y + "px"; el.style.opacity = cur_opacity; el.style.fontSize = cur_fontSize + "px"; },50); // 時(shí)間到了之后清空定時(shí)器 清除剛才添加的元素 并且恢復(fù)點(diǎn)擊觸發(fā)事件 setTimeout(function(){ clearInterval(_timer); elBody.removeChild(el); bombFlag = true; },500); } // 暫停點(diǎn)擊觸發(fā)事件 bombFlag = false; }; })();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
欄 目:JavaScript
本文標(biāo)題:js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9399.html
您可能感興趣的文章
- 04-02java后端代碼分頁(yè) java后端實(shí)現(xiàn)分頁(yè)page
- 01-10Echarts實(shí)現(xiàn)單條折線(xiàn)可拖拽效果
- 01-10在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
- 01-10js實(shí)現(xiàn)上傳圖片并顯示圖片名稱(chēng)
- 01-10Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
- 01-10echarts實(shí)現(xiàn)折線(xiàn)圖的拖拽效果
- 01-10d3.js實(shí)現(xiàn)圖形縮放平移
- 01-10小程序簡(jiǎn)單兩欄瀑布流效果的實(shí)現(xiàn)
- 01-10H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能
- 01-10Echarts實(shí)現(xiàn)多條折線(xiàn)可拖拽效果


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02javascript點(diǎn)線(xiàn),點(diǎn)線(xiàn)的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁(yè)面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10C#中split用法實(shí)例總結(jié)