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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
webpack打包js的方法
Mar 12 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 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中Date获取时间不正确怎么办
2008/06/05 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
JS链式调用的实现方法
2013/03/07 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python collections模块实例讲解
2014/04/07 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
省三好学生申请材料
2014/01/22 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
刑事和解协议书范本
2014/11/19 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫