js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果
本文實例為大家分享了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í)有所幫助,也希望大家多多支持我們。
欄 目:JavaScript
本文標(biāo)題:js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9399.html
您可能感興趣的文章
- 04-02java后端代碼分頁 java后端實現(xiàn)分頁page
- 01-10Echarts實現(xiàn)單條折線可拖拽效果
- 01-10在Vue項目中使用Typescript的實現(xiàn)
- 01-10js實現(xiàn)上傳圖片并顯示圖片名稱
- 01-10Vue中使用Lodop插件實現(xiàn)打印功能的簡單方法
- 01-10echarts實現(xiàn)折線圖的拖拽效果
- 01-10d3.js實現(xiàn)圖形縮放平移
- 01-10小程序簡單兩欄瀑布流效果的實現(xiàn)
- 01-10H5實現(xiàn)手機(jī)拍照和選擇上傳功能
- 01-10Echarts實現(xiàn)多條折線可拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點線,點線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報,JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11ajax實現(xiàn)頁面的局部加載
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05織夢dedecms什么時候用欄目交叉功能?
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-10delphi制作wav文件的方法
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 01-10C#中split用法實例總結(jié)


