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 面向对象 function类
May 13 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
php代码把全角数字转为半角数字
2007/12/10 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
python异步存储数据详解
2019/03/19 Python
python学习开发mock接口
2019/04/28 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python实现两个文件夹的同步
2019/08/29 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python名片管理系统开发
2020/06/18 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
2014年廉洁自律承诺书
2014/05/26 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript