欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

歡迎來(lái)到入門(mén)教程網(wǎng)!

JavaScript

當(dāng)前位置:主頁(yè) > 網(wǎng)絡(luò)編程 > JavaScript >

js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果

來(lái)源:本站原創(chuàng)|時(shí)間:2020-01-10|欄目:JavaScript|點(diǎn)擊: 次

本文實(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í)有所幫助,也希望大家多多支持我們。

上一篇:如何基于JS截獲動(dòng)態(tài)代碼

欄    目:JavaScript

下一篇:vue遠(yuǎn)程加載sfc組件思路詳解

本文標(biāo)題:js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果

本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9399.html

網(wǎng)頁(yè)制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語(yǔ)言數(shù)據(jù)庫(kù)服務(wù)器

如果侵犯了您的權(quán)利,請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有