鼠标点击效果.html(网上收集6)

 

 

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>鼠标点击</title>
</head><body>
<script>(function () {var a_idx = 0;window.onclick = function (event) {var a = new Array("❤富强❤", "❤民主❤", "❤文明❤", "❤和谐❤", "❤自由❤", "❤平等❤", "❤公正❤", "❤法治❤", "❤爱国❤","❤敬业❤", "❤诚信❤", "❤友善❤");var heart = document.createElement("b"); //创建b元素heart.onselectstart = new Function('event.returnValue=false'); //防止拖动document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上a_idx = (a_idx + 1) % a.length;heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式var f = 16, // 字体大小x = event.clientX - f / 2, // 横坐标y = event.clientY - f, // 纵坐标c = randomColor(), // 随机颜色a = 1, // 透明度s = 1.2; // 放大缩小var timer = setInterval(function () { //添加定时器if (a <= 0) {document.body.removeChild(heart);clearInterval(timer);} else {heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +s + ");";y--;a -= 0.016;s += 0.002;}}, 15)}// 随机颜色function randomColor() {return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";}}());
</script>
</body></html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标点击</title>
</head><body>
<!-- 网页鼠标点击特效（爱心） -->
<script type="text/javascript">! function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);
</script>
</body></html>
<html>
<head></head>
<body>
<script>function clickEffect() {let balls = [];let longPressed = false;let longPress;let multiplier = 0;let width, height;let origin;let normal;let ctx;const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];const canvas = document.createElement("canvas");document.body.appendChild(canvas);canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");const pointer = document.createElement("span");pointer.classList.add("pointer");document.body.appendChild(pointer);if (canvas.getContext && window.addEventListener) {ctx = canvas.getContext("2d");updateSize();window.addEventListener('resize', updateSize, false);loop();window.addEventListener("mousedown", function(e) {pushBalls(randBetween(10, 20), e.clientX, e.clientY);document.body.classList.add("is-pressed");longPress = setTimeout(function(){document.body.classList.add("is-longpress");longPressed = true;}, 500);}, false);window.addEventListener("mouseup", function(e) {clearInterval(longPress);if (longPressed == true) {document.body.classList.remove("is-longpress");pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);longPressed = false;}document.body.classList.remove("is-pressed");}, false);window.addEventListener("mousemove", function(e) {let x = e.clientX;let y = e.clientY;pointer.style.top = y + "px";pointer.style.left = x + "px";}, false);} else {console.log("canvas or addEventListener is unsupported!");}function updateSize() {canvas.width = window.innerWidth * 2;canvas.height = window.innerHeight * 2;canvas.style.width = window.innerWidth + 'px';canvas.style.height = window.innerHeight + 'px';ctx.scale(2, 2);width = (canvas.width = window.innerWidth);height = (canvas.height = window.innerHeight);origin = {x: width / 2,y: height / 2};normal = {x: width / 2,y: height / 2};}class Ball {constructor(x = origin.x, y = origin.y) {this.x = x;this.y = y;this.angle = Math.PI * 2 * Math.random();if (longPressed == true) {this.multiplier = randBetween(14 + multiplier, 15 + multiplier);} else {this.multiplier = randBetween(6, 12);}this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);this.r = randBetween(8, 12) + 3 * Math.random();this.color = colours[Math.floor(Math.random() * colours.length)];}update() {this.x += this.vx - normal.x;this.y += this.vy - normal.y;normal.x = -2 / window.innerWidth * Math.sin(this.angle);normal.y = -2 / window.innerHeight * Math.cos(this.angle);this.r -= 0.3;this.vx *= 0.9;this.vy *= 0.9;}}function pushBalls(count = 1, x = origin.x, y = origin.y) {for (let i = 0; i < count; i++) {balls.push(new Ball(x, y));}}function randBetween(min, max) {return Math.floor(Math.random() * max) + min;}function loop() {ctx.fillStyle = "rgba(255, 255, 255, 0)";ctx.clearRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < balls.length; i++) {let b = balls[i];if (b.r < 0) continue;ctx.fillStyle = b.color;ctx.beginPath();ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);ctx.fill();b.update();}if (longPressed == true) {multiplier += 0.2;} else if (!longPressed && multiplier >= 0) {multiplier -= 0.4;}removeBall();requestAnimationFrame(loop);}function removeBall() {for (let i = 0; i < balls.length; i++) {let b = balls[i];if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {balls.splice(i, 1);}}}}clickEffect();//调用特效函数
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/192781.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Python从入门到进阶】43.验证码识别工具结合requests的使用

【Python从入门到进阶】43.验证码识别工具结合requests的使用

接上篇《42、使用requests的Cookie登录古诗文网站》 上一篇我们介绍了如何利用requests的Cookie登录古诗文网。本篇我们来学习如何使用验证码识别工具进行登录验证的自动识别。 一、图片验证码识别过程及手段 上一篇我们通过requests的session方法&#xff0c;带着原网页登录…
阅读更多...
人工智能 - 人脸识别：发展历史、技术全解与实战

人工智能 - 人脸识别：发展历史、技术全解与实战

目录 一、人脸识别技术的发展历程早期探索&#xff1a;20世纪60至80年代技术价值点&#xff1a; 自动化与算法化&#xff1a;20世纪90年代技术价值点&#xff1a; 深度学习的革命&#xff1a;21世纪初至今技术价值点&#xff1a; 二、几何特征方法详解与实战几何特征方法的原理…
阅读更多...
python安装与配置：在centos上使用shell脚本一键安装

python安装与配置：在centos上使用shell脚本一键安装

介绍 Python是一种功能强大且广泛使用的编程语言&#xff0c;但在某些情况下&#xff0c;您可能需要安装和配置特定版本的Python。本教程将向您展示如何使用一个Shell脚本自动完成这个过程&#xff0c;以便您可以快速开始使用Python 3。 使用shell自动化安装教程 1. 复制脚本…
阅读更多...
51单片机项目（19）——基于51单片机的传送带产品计数器

51单片机项目（19）——基于51单片机的传送带产品计数器

1.功能描述 应用背景: 某生产线的传送带上不断地有产品单向传送&#xff0c;传送时会通过光电传感器产生方波信号&#xff0c;将该信号(可以采用方波发生器来模拟该信号)直接传送给51单片机&#xff0c;利用计数器0计量产品(方波信号)的个数&#xff0c;利用.定时器1产…
阅读更多...
Python海绵宝宝

Python海绵宝宝

目录 系列文章 写在前面 海绵宝宝 写在后面 系列文章 序号文章目录直达链接表白系列1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.cs…
阅读更多...
leetcode 209. 长度最小的子数组（优质解法）

leetcode 209. 长度最小的子数组（优质解法）

代码&#xff1a; //时间复杂度 O(N) ,空间复杂度 O(1) class Solution {//采用滑动窗口的方法解决public int minSubArrayLen(int target, int[] nums) {int numsLengthnums.length;int minLengthInteger.MAX_VALUE;int left0;int right0;int sum0;while (right<numsLengt…
阅读更多...
【SpringBoot】讲清楚日志文件lombok

【SpringBoot】讲清楚日志文件lombok

文章目录 前言一、日志是什么&#xff1f;二、⽇志怎么⽤&#xff1f;三.自定义打印日志3.1在程序中得到日志对象3.2使用日志打印对象 四.⽇志级别4.1日志级别有什么用4.2 ⽇志级别的分类与使⽤ 五.日志持久化六.lombok6.1添加lobok依赖注意&#xff1a;使⽤ Slf4j 注解&#x…
阅读更多...
Linux 多线程(C语言) 备查

Linux 多线程(C语言) 备查

基础 1&#xff09;线程在运行态和就绪态不停的切换。 2&#xff09;每个线程都有自己的栈区和寄存器 1&#xff09;进程是资源分配的最小单位&#xff0c;线程是操作系统调度执行的最小单位 2&#xff09;线程的上下文切换的速度比进程快得多 3&#xff09;从应用程序A中启用应…
阅读更多...
Linux系列-1 Linux启动流程——init与systemd进程

Linux系列-1 Linux启动流程——init与systemd进程

背景&#xff1a; 最近对所有项目完成了一个切换&#xff0c;服务管理方式由&#xff1a; init-> systemd。对相关知识进行总结一下。 1.启动流程 服务器的整体启动流程如下图所示&#xff1a; POST&#xff1a; 计算机通电后进行POST( Power-On Self-Test )加电自检&am…
阅读更多...
linux之buildroot(3)配置软件包

linux之buildroot(3)配置软件包

Linux之buildroot(3)配置软件包 Author&#xff1a;Onceday Date&#xff1a;2023年11月30日 漫漫长路&#xff0c;才刚刚开始… 全系列文章请查看专栏: buildroot编译框架_Once_day的博客-CSDN博客。 参考文档&#xff1a; Buildroot - Making Embedded Linux Easymdev.t…
阅读更多...
Hdoop学习笔记（HDP）-Part.17 安装Spark2

Hdoop学习笔记（HDP）-Part.17 安装Spark2

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
canvas 轮廓路径提取效果

canvas 轮廓路径提取效果

前言 微信公众号&#xff1a;前端不只是切图 轮廓 对内容做border效果&#xff0c;可以先看下代码运行的效果 内容是黑线构成的五角星&#xff0c;其轮廓就是红线的部分&#xff0c;本文主要介绍如何在canvas中实现这种效果 Marching Square 这里运用到的是marching square算法…
阅读更多...
鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

鸿蒙是Android套壳么，当然不是，ArkTS还是很有意思的

前段时间看新闻&#xff0c;说是明年开始鸿蒙就要和andorid脱钩了。 大概就是这样的&#xff1a; 看到这个&#xff0c;我兴趣就来了。我有个华为P30&#xff0c;升级过鸿蒙系统&#xff0c;用起来也没啥变化&#xff0c;兼容andorid应用&#xff0c;然后就是开机去掉了Powere…
阅读更多...
数据库表的管理

数据库表的管理

表的基本概念 表是包含数据库中所有数据的数据库对象。数据在表中的组织方式与在电子表格中相似&#xff0c;都是 按行和列的格式组织的。每行代表一条唯一的记录&#xff0c;每列代表记录中的一个字段。例如&#xff0c;在包含公 司员工信息的表中&#xff0c;每行代表一名员工…
阅读更多...
19.字符串——查找三个字符串中的最大字符串（打擂台）

19.字符串——查找三个字符串中的最大字符串（打擂台）

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 四、举一反三总结 前言 本系列为字符串处理函数编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 查找三个字符串中的最大字符串 二、题目分析 打擂台 三、解题 程序运行代码 #include<…
阅读更多...
从零开始：PHP实现阿里云直播的简单方法！

从零开始：PHP实现阿里云直播的简单方法！

1. 配置阿里云直播的推流地址和播放地址 使用阿里云直播功能前&#xff0c;首先需要在阿里云控制台中创建直播应用&#xff0c;然后获取推流地址和播放地址。 推流地址一般格式为&#xff1a; rtmp://{Domain}/{AppName}/{StreamName}?auth_key{AuthKey}-{Timestamp}-{Rand…
阅读更多...
如何使用手机制作证件照

如何使用手机制作证件照

1、打开vx搜索小&#x1f34a;x名称&#xff1a;标准证件照免冠照 2、选择你需要的证件照尺寸类型 3&#xff0e;选择手机照片生活照或者点击开始拍摄&#xff08;建议纯色的墙面好换底色&#xff09; 4&#xff0e;选择背景颜色&#xff0c;红底&#xff0c;蓝底奉背景颜色随你…
阅读更多...
数据库管理-第121期 我为什么写文章（202301203）

数据库管理-第121期 我为什么写文章（202301203）

数据库管理-第121期 我为什么写文章&#xff08;202301203&#xff09; 其实呢~大周末我不是太想写文章的&#xff0c;周五HaloDB起了个头还有一堆可以做的事情都计划到下周了&#xff0c;但是昨天发生了一件事情&#xff0c;让我很是不开心&#xff1a;强盗逻辑&#xff0c;白…
阅读更多...
前端入门（五）Vue3组合式API特性

前端入门（五）Vue3组合式API特性

文章目录 Vue3简介创建Vue3工程使用vite创建vue-cli方式 常用 Composition API启动项 - setup()setup的执行时机与参数 响应式原理vue2中的响应式vue3中的响应式ref函数reactive函数reactive与ref对比 计算属性 - computed监视属性 - watchwatchEffect Vue3生命周期自定义hook函…
阅读更多...
服务器数据恢复—V7000存储raid5崩溃导致上层卷无法使用的数据恢复案例

服务器数据恢复—V7000存储raid5崩溃导致上层卷无法使用的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌V7000存储中有一组由几十块硬盘组建的raid5阵列。上层操作系统为windows server&#xff0c;NTFS分区。 服务器故障&#xff1a; 有一块硬盘出现故障离线&#xff0c;热备盘自动上线替换离线硬盘。在热备盘上线同步数据的过程&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023