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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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购物车实现代码
2011/10/10 PHP
php设计模式小结
2013/02/15 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
毕业生教师求职信
2013/10/20 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
爱情检讨书大全
2014/01/21 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
工厂标语大全
2014/10/06 职场文书
国庆横幅标语
2014/10/08 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python