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调用后台方法示例
Dec 02 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
python单元测试unittest实例详解
2015/05/11 Python
python psutil库安装教程
2018/03/19 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
简历中自我评价范文
2015/03/11 职场文书
信仰观后感
2015/06/03 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
详解vue中v-for的key唯一性
2021/05/15 Vue.js
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL