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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
实例浅析js的this
Dec 11 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
js 调用百度分享功能
2017/02/27 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
jQuery实现日历效果
2020/09/11 jQuery
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
virtualenv介绍及简明教程
2020/06/23 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
高一英语教学反思
2014/01/22 职场文书
原材料检验岗位职责
2014/03/15 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
写给导师的自荐信
2015/03/06 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Java数据结构之链表相关知识总结
2021/06/18 Java/Android