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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
php 获取远程网页内容的函数
2009/09/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
react的hooks的用法详解
2020/10/12 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python requests.post带head和body的实例
2019/01/02 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
查看keras的默认backend实现方式
2020/06/19 Python
Python多线程的退出控制实现
2020/08/10 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
JS class语法糖的深入剖析
2022/07/07 Javascript