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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python实现京东秒杀功能代码
2019/05/16 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
业务经理岗位职责
2013/11/11 职场文书
党员党性分析材料
2014/02/17 职场文书
个人欠款担保书
2014/05/20 职场文书
关爱留守儿童标语
2014/06/18 职场文书
视光学专业自荐信
2014/06/24 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题