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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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
239军机修复记
2021/03/02 无线电
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php 安全过滤函数代码
2011/05/07 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
python中操作文件的模块的方法总结
2021/02/04 Python
css3的transition属性详解
2014/12/15 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
女子职高个人自荐书
2014/02/01 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
房屋转让协议书
2014/10/18 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
车辆挂靠协议书
2016/03/23 职场文书