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 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
webpack4简单入门实例
Sep 06 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
vue使用recorder.js实现录音功能
Nov 22 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python time模块用法实例详解
2014/09/11 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
集体婚礼证婚词
2014/01/13 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
优秀经理获奖感言
2014/03/04 职场文书
事假请假条范文
2014/04/11 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
大学生实习介绍信
2015/05/05 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Python中的 Set 与 dict
2022/03/13 Python
mysql查找连续出现n次以上的数字
2022/05/11 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers