Javascript实现鼠标点击冒泡特效


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下

一个用JS写的鼠标左击特效

点击鼠标左键会出现红心”❤”或者字符表情“(๑•́ ₃ •̀๑)”…

常用Emoji

可以自行替换,如需复制,请从底部链接移步至Github

Javascript实现鼠标点击冒泡特效

代码

onload = function() {
 var click_cnt = 0;
 var $html = document.getElementsByTagName("html")[0];
 var $body = document.getElementsByTagName("body")[0];
 $html.onclick = function(e) {
 var $elem = document.createElement("b");
 $elem.style.color = "#E94F06";
 $elem.style.zIndex = 9999;
 $elem.style.position = "absolute";
 $elem.style.select = "none";
 var x = e.pageX;
 var y = e.pageY;
 $elem.style.left = (x - 10) + "px";
 $elem.style.top = (y - 20) + "px";
 clearInterval(anim);
 switch (++click_cnt) {
  case 10:
  $elem.innerText = "OωO";
  break;
  case 20:
  $elem.innerText = "(๑•́ ∀ •̀๑)";
  break;
  case 30:
  $elem.innerText = "(๑•́ ₃ •̀๑)";
  break;
  case 40:
  $elem.innerText = "(๑•̀_•́๑)";
  break;
  case 50:
  $elem.innerText = "( ̄へ ̄)";
  break;
  case 60:
  $elem.innerText = "(?°口°)?(┴—┴";
  break;
  case 70:
  $elem.innerText = "૮( ᵒ̌皿ᵒ̌ )ა";
  break;
  case 80:
  $elem.innerText = "?(。>口<。)?";
  break;
  case 90:
  $elem.innerText = "( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃";
  break;
  case 100:
  case 101:
  case 102:
  case 103:
  case 104:
  case 105:
  $elem.innerText = "(ꐦ°᷄д°᷅)";
  break;
  default:
  $elem.innerText = "❤";
  break;
 }
 $elem.style.fontSize = Math.random() * 10 + 8 + "px";
 var increase = 0;
 var anim;
 setTimeout(function() {
  anim = setInterval(function() {
  if (++increase == 150) {
   clearInterval(anim);
   $body.removeChild($elem);
  }
  $elem.style.top = y - 20 - increase + "px";
  $elem.style.opacity = (150 - increase) / 120;
  }, 8);
 }, 70);
 $body.appendChild($elem);
 };
};

预览

Javascript实现鼠标点击冒泡特效

Javascript实现鼠标点击冒泡特效

Javascript实现鼠标点击冒泡特效

Github地址:JSClickBubble

更多JavaScript精彩特效分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
Javascript学习笔记5 类和对象
Jan 11 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
javascript实现点击星星小游戏
Dec 24 #Javascript
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
JS实现简易留言板特效
Dec 23 #Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
You might like
PHP脚本的10个技巧(4)
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
php中namespace及use用法分析
2016/12/06 PHP
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python 画出来六维图
2019/07/26 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
心理健康教育制度
2014/01/27 职场文书
教学实验楼管理制度
2014/02/01 职场文书
环境整治工作方案
2014/05/18 职场文书
书法大赛策划方案
2014/06/04 职场文书
培训科主任岗位职责
2014/08/08 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
会计试用期自我评价
2015/03/10 职场文书
个人道歉信大全
2019/04/11 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers