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 jq 弹出层实例
Aug 25 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
js实现异步循环实现代码
Feb 16 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
PHP数组函数知识汇总
2016/05/12 PHP
php json相关函数用法示例
2017/03/28 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
原生JS实现小小的音乐播放器
2017/10/16 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python字符串格式化输出代码实例
2019/11/22 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
大学应届毕业生求职信
2014/05/24 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
高中运动会广播稿
2014/09/16 职场文书
大学生赌博检讨书
2014/09/22 职场文书
运动会广播稿200字
2014/10/18 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android