js实现鼠标点击飘爱心效果


Posted in Javascript onAugust 19, 2020

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

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>鼠标点击特效</title>
 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1743249_grf4shm1g3t.css" >
 <style>
  html {
   cursor: pointer;
  }

  h3 {
   text-align: center;
   user-select: none;
  }

  .div-box {
   width: 30px;
   height: 30px;
   font-size: 30px;
   position: absolute;
  }
 </style>
</head>

<body>
 <h3>请点击屏幕查看效果</h3>
 <script>
  window.onclick = function (e) {
   //存储需要的颜色
   let arr = ["red", "yellow", "green", "pink", "blue", "purple", "orangered"];
   //随机产生一个颜色
   let heartNum = Math.floor(Math.random() * arr.length);
   let div = document.createElement("div");
   div.setAttribute("class", "iconfont iconzan div-box");
   div.style.color = arr[heartNum];
   document.body.appendChild(div);
   //获得鼠标的x,y轴的位置,并减去自身宽高的一半,使其能够在爱心的正中心
   let x = e.pageX - div.offsetWidth / 2;
   let y = e.pageY - div.offsetHeight / 2;
   div.style.left = x + "px";
   div.style.top = y + "px";
   //获得0-1的整数
   let num = Math.round(Math.random());
   let timer = setInterval(() => {
    y -= 10;
    if (num === 0) x -= 10;
    else x += 10;
    div.style.left = x + "px";
    div.style.top = y + "px";
    //如果超出屏幕范围,则删除此节点
    if (y < -100) {
     clearInterval(timer);
     div.remove();
    }
   }, 100);
  }
 </script>
</body>

</html>

效果图如下

js实现鼠标点击飘爱心效果

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

Javascript 相关文章推荐
js CSS操作方法集合
Oct 31 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
js实现倒计时关键代码
May 05 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue做网页开场视频的实例代码
Oct 20 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
JS Ajax请求会话过期处理问题解决方法分析
Nov 16 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 #Javascript
Vue实现导航栏菜单
Aug 19 #Javascript
vue实现tab栏点击高亮效果
Aug 19 #Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 #Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 #Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 #Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
思想汇报格式
2014/01/05 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
工程技术员岗位职责
2015/04/11 职场文书
检讨书范文
2019/04/16 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python