使用原生JS,实现鼠标点击爱心效果 !!!

时间:2022-09-02 23:00:44

使用原生JS,实现鼠标点击爱心效果 !!!

引言:

在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果,对于用户而言,这样的体验是很极致的。其实实现起来也很简单,下面一起来学习一下吧。文末附上完整代码,可以复制关键部分直接使用到自己的页面上

实现效果

使用原生JS,实现鼠标点击爱心效果 !!!

这样的效果很常用,在很多网页博客中都有使用

实现思路

  1. 首先我们需要获取到当前鼠标点击的位置
  2. 需要在当前位置生成一个标签
  3. 需要给标签添加随机的自定义内容
  4. 随机的文本颜色
  5. 添加文本的淡出效果
  6. 清除淡出的标签

实现过程

下面的代码为了分开解释进行了拆分,完整代码在文末

1. 生成随机文本

let content = ["去活出你自己。", "《日不落》", "《一格格》", "《森林巴士》", "《爱就一个字》",
"《星辰大海》", "《千千万万》", "《我在等》", "《如一》", "《收敛》", "《间距》", "《早点早点》",
"《阿拉斯加海湾》", "《Peace&Love》", "《灰色》", "《带你回家》", "《等我回家》", "《0919》",
"《我很好》", "《会不会》", "《经济舱》", "《我走后》", "《不删》", "《Girls》",
"《Let Her Go》", "《关于你的梦》", "《慢慢》", "《下雨天》", "《翅膀》", "《靠近一点》",
"《翅膀》", "《This Is Love》", "《重来》", "《晴天》", "《空白格》", "《爱你3000》",
"《下落不明》", "《我要》", "《晚星》", "《你,好不好?》", "《50 Feet》", "《COCO》",
"《NUMB》", "《重演》", "《所念皆星河》"
] //自定义内容的数组
let randContent = Math.ceil(Math.random() * content.length);

首先需要自己定义一个数组,存放的内容就是鼠标点击时出现的内容,我这里用的是我自己喜欢的音乐(一个个打的,真的辛苦),然后通过随机获取一个数组索引,来实现随机文本。

2. 随机生成一个颜色

Text.prototype.getRandom = function() {
let allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'; //16进制颜色
let allTypeArr = allType.split(','); //通过','分割为数组
let color = '#';
for (var i = 0; i < 6; i++) {
//随机生成一个0-16的数
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; //返回随机生成的颜色
}

这个在前面写过的博客中也有用到,这次是直接复制过来的,通过随机获取0-16中的值,来实现一个16进制的颜色,这里我们要知道像#000fff这样表示的颜色,其实是6个16进制数组成的!

3. 文本上升效果

let i = 0
setInterval(() => {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);

由于原生js中直接操作动画帧的样式比较复杂,所以采用定时器实现相同的功能,将标签的top值逐渐减小,这样标签就会实现上升的效果

4. 文字逐渐变淡效果

@keyframes remove {
100% {
opacity: 0;
}
}

逐渐变淡的效果是通过css3动画来实现的很简单,动画是通过js来给元素绑定的

5. 清除标签

Text.prototype.out = function (_this) {
_this.remove()
}
setTimeout(function () {
text.out(span)
}, 1900)

由于动画时长是两秒钟,这里采用倒计时,在1.9秒左右将标签删除~

6. 鼠标点击实例化标签,并在点击位置生成

body.addEventListener('click', function (e) {
let x = e.pageX;
let y = e.pageY; //当前坐标
let randContent = Math.ceil(Math.random() * content.length);//获取随机数
let text = new Text(x, y, randContent);//实例化
let span = document.createElement('span')//新建标签
span.style.color = text.getRandom();//添加随机颜色
text.create(span);//添加文本内容
setTimeout(function () {
text.out(span)//清除标签
}, 1900)
})

这里通过实例化的方式来给文本标签添加样式和方法,将文本标签显示在页面上

完整代码

一下就是完整代码,可以更改数组中的内容来实现自己的效果

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击出现自定义文字</title>
<style>
body {
height: 100vh;
background-color: black;
} .text {
position: absolute;
z-index: 9999999;
font-weight: bold;
user-select: none;
} @keyframes remove {
100% {
opacity: 0;
}
}
</style>
</head> <body> </body>
<script>
window.addEventListener('load', function () {
let body = document.body;
let content = ["去活出你自己。", "《日不落》", "《一格格》", "《森林巴士》", "《爱就一个字》",
"《星辰大海》", "《千千万万》", "《我在等》", "《如一》", "《收敛》", "《间距》", "《早点早点》",
"《阿拉斯加海湾》", "《Peace&Love》", "《灰色》", "《带你回家》", "《等我回家》", "《0919》",
"《我很好》", "《会不会》", "《经济舱》", "《我走后》", "《不删》", "《Girls》",
"《Let Her Go》", "《关于你的梦》", "《慢慢》", "《下雨天》", "《翅膀》", "《靠近一点》",
"《翅膀》", "《This Is Love》", "《重来》", "《晴天》", "《空白格》", "《爱你3000》",
"《下落不明》", "《我要》", "《晚星》", "《你,好不好?》", "《50 Feet》", "《COCO》",
"《NUMB》", "《重演》", "《所念皆星河》"
] //自定义内容的数组
body.addEventListener('click', function (e) {
let x = e.pageX;
let y = e.pageY; //当前坐标
let randContent = Math.ceil(Math.random() * content.length);
let text = new Text(x, y, randContent);
let span = document.createElement('span')
span.style.color = text.getRandom();
text.create(span);
setTimeout(function () {
text.out(span)
}, 1900)
}) function Text(x, y, rand) {
this.x = x;
this.y = y;
this.rand = rand;
}
Text.prototype.create = function (_this) {
let body = document.body;
_this.innerHTML = content[this.rand - 1];
_this.className = 'text'
_this.style.top = this.y - 20 + 'px'
_this.style.left = this.x - 50 + 'px'
_this.style.animation = 'remove 2s'
body.appendChild(_this);
let i = 0
setInterval(() => {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);
}
Text.prototype.out = function (_this) {
_this.remove()
}
//设置随机颜色
Text.prototype.getRandom = function () {
let allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'; //16进制颜色
let allTypeArr = allType.split(','); //通过','分割为数组
let color = '#';
for (var i = 0; i < 6; i++) {
//随机生成一个0-16的数
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; //返回随机生成的颜色
}
})
</script>
</html>

今天的分享就结束辽~,快打开你的编译器实现吧!!!

使用原生JS,实现鼠标点击爱心效果 !!!的更多相关文章

  1. JS实现鼠标点击爱心&amp&semi;绘制多边形&amp&semi;每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  2. 用js实现鼠标点击爱心特效

    效果如图以下是代码 <script> !function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s ...

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  5. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  6. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  7. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. 61&period;H5---利用canvas&plus;原生js进行鼠标跟随绘图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. C&plus;&plus;程序员如何转Java

     C++程序员如何转Java 忙里偷闲,到了这个时间终于得空写一篇早想写的文章.其实本文的标题有些不太准确,C++程序员写Java代码不是说就非得转行写Java,抛弃C++,而只是多了一个选择而已.两 ...

  2. ubuntu VNC server 黑屏 yum源更新&lpar;ubuntu16&period;04&rpar;

    更新yum源,备份/etc/apt/sources.list root@mgw-virtual-machine:~# nano /etc/apt/sources.list   #添加源 # deb c ...

  3. OCP-1Z0-051-标题决心-文章5称号

    5. Which SQL statements would display the value 1890.55 as $1,890.55? (Choose three .) A. SELECT TO_ ...

  4. iOS 使用AVAudioPlayer开发录音功能

    最近要做一个类似对讲的功能,所以需要用到录音上传,然后再播放的功能. 一.音频格式分析 因为之前没研究过音频这块,所以很多音频格式都是第一次见. AAC: AAC其实是"高级音频编码(adv ...

  5. Mybatis学习总结(六)——高级映射&lpar;一对一,一对多,多对多&rpar;

    一.订单商品数据模型 1.数据库执行脚本 创建数据库表代码: /*Table structure for table `t_user` */ CREATE TABLE t_user ( id INT ...

  6. InnoDB存储引擎表的主键

    在InnoDB存储引擎中,表是按照主键顺序组织存放的.在InnoDB存储引擎表中,每张表都有主键(primary key),如果在创建表时没有显式地定义主键,则InnoDB存储引擎会按如下方式选择或创 ...

  7. MFC坐标系

    MFC坐标系分为设备坐标系和逻辑坐标系两种.在设备坐标系中,一个像素表示一个单位长度,设备的原点(0,0)始终在显示平面的左上角位置,x轴正向向右,y轴正向向下. 逻辑坐标系中,原点可以放在任何一个位 ...

  8. 使用VSCode调试单个PHP文件

    突然发现是可以使用 VSCode 调试单个 PHP 文件的,今天之前一直没有弄成功,还以为 VSCode 是不能调试单文件呢.这里记录一下今天这个"突然发现"的过程. 开始,是在看 ...

  9. try except与try finally不同之处

    try except与try finally不同之处 try//尝试执行 {SomeCode}  except//出错的时候执行, Except有特定的错误类型  {SomeCode}  end; t ...

  10. JAVA核心技术I---JAVA基本程序设计结构

    一:讨论一个简单的Java程序 package hello; public class Hello { /** * @param args */ public static void main(Str ...