js实现鼠标点击页面弹出自定义文字效果


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下

效果:

js实现鼠标点击页面弹出自定义文字效果

实现代码:

(function(e){
 // 点击事件触发生生元素等一系列动作的初始状态
 var bombFlag = true;
 // body节点
 var elBody = document.getElementsByTagName("body")[0];
 // 初始化文字数组下标
 var a_idx = 0;
 elBody.onclick = function(e) {
 if(bombFlag){
  // 坐标
  var ev = e||event,//  IE浏览器兼容
  x = ev.clientX,
     y = ev.clientY;
   // 随机产生文字颜色
  var color1 = Math.floor((Math.random()*255));
  var color2 = Math.floor((Math.random()*255));
  var color3 = Math.floor((Math.random()*255));
  // 初始化定时器
   var _timer = null;
   // 文字数组
   var a = new Array("乐观", "❤" ,"积极", "向上", "自由", "正能量","(*^?^*)", "元气满满", "开心" ,"快乐", "善良", "可爱", "暴富", "暴瘦","❤");
   // 创建节点
   var elSpan = document.createElement("span");
   // 随机节点内容
   a_idx = (a_idx + 1) % a.length;
   // 添加内容到节点
   elSpan.innerHTML = a[a_idx];
   // 初始节点化样式
   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);
   // 获取追加后的节点
   var el = document.getElementsByClassName("floatSpan")[0];
   // 初始化需要渐变的变量值
   // top值
   var cur_y = y - 20;
   // 透明度
   var cur_opacity = 1;
   // 字体大小
   var cur_fontSize = 14;
   // 创建定时器
   _timer = setInterval(function(){
    // 渐变变量
    cur_y += -10;
    cur_opacity -= 0.1;
    cur_fontSize += 1;
    // 渐变变量赋值(因为有单位的关系 所以不能直接加减 通过中间变量来赋值)
    el.style.top = cur_y + "px";
    el.style.opacity = cur_opacity;
    el.style.fontSize = cur_fontSize + "px";
   },50);
   // 时间到了之后清空定时器 清除刚才添加的元素 并且恢复点击触发事件
   setTimeout(function(){
    clearInterval(_timer);
    elBody.removeChild(el);
    bombFlag = true;
   },500);
 }
 // 暂停点击触发事件
   bombFlag = false;
 };
})();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 #Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
JS实现简易留言板特效
Dec 23 #Javascript
You might like
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python操作列表的常用方法分享
2014/02/13 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python爬取成语接龙类网站
2018/10/19 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
详解python内置模块urllib
2020/09/09 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
婚前协议书怎么写
2014/04/15 职场文书
总经理任命书范本
2014/06/05 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
英文版辞职信
2015/02/28 职场文书
小学安全工作总结2015
2015/05/18 职场文书
美丽人生观后感
2015/06/03 职场文书
法律讲堂观后感
2015/06/11 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL