js实现鼠标点击飘爱心效果
更新时间：2020年08月19日 10:31:35 作者：zhujun_blog
这篇文章主要为大家详细介绍了js实现鼠标点击飘爱心效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要给大家介绍了关于JavaScript实现复制粘贴剪切功能的相关资料,在实际案例的操作过程中,不少人都会遇到这样的开发需求,文中通过代码将三种方法介绍的非常详细,需要的朋友可以参考下2024-01-01
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性，从字面上来看，二者的功能很好理解，分别是"延迟脚本"和"异步脚本"的作用2016-01-01
javascript实现时间格式输出FormatDate函数
这篇文章主要介绍了javascript实现时间格式输出FormatDate函数,可实现fmt标签一样对日期时间型内容格式输入的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
虽然现在不联网的情况很少，但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的。下面就给大家分享下搭建Bootstrap离线文档的方法，感兴趣的朋友一起看看吧2016-12-12
这篇文章主要为大家详细介绍了JS实现字体背景跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
本篇文章主要介绍了Javascript中字符串相关常用的使用方法。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了微信小程序判断用户是否需要再次授权获取个人信息,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最近在学习three.js，将学习中遇到的知识点总结分享出来，下面这篇文章主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
本文主要介绍了javaScript操作字符串的一些常用方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
例如处理事件的时候，有时候需要知道当前点击的是第几个子节点，而HTML DOM本身并没有直接提供相应的属性，需要自己来计算。感兴趣的朋友可以了解下本文2013-10-10
最新评论