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 相关文章推荐
基于jquery的$.ajax async使用
Oct 19 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 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
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python仿抖音表白神器
2019/04/08 Python
python binascii 进制转换实例
2019/06/12 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
python空元组在all中返回结果详解
2020/12/15 Python
战友聚会邀请函
2014/01/18 职场文书
教师辞职报告范文
2014/01/20 职场文书
应用数学专业求职信
2014/03/14 职场文书
热门专业求职信
2014/05/24 职场文书
国家助学金感谢信
2015/01/21 职场文书
中标通知书
2015/04/17 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
结婚十年感言
2015/07/31 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers