鼠标点击效果.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，一经查实，立即删除！

相关文章

docker 如何在容器内重启 php

docker 如何在容器内重启 php

要在Docker容器内重启PHP&#xff0c;您可以按照以下步骤进行操作&#xff1a; 1. 进入您的Docker容器。可以使用以下命令启动一个交互式的容器会话&#xff1a; docker exec -it <container_name> /bin/bash其中<container_name>是您的容器的名称。。 2. 在容器内…
阅读更多...
【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; 二、几何特征方法详解与实战几何特征方法的原理…
阅读更多...
golang实现文件上传(高并发+分块+断点续传+加密)

golang实现文件上传(高并发+分块+断点续传+加密)

运行视频 // todo 根据前端传递文件加密 func (s *FileProcess) FileProcessEncryptionByFront(file multipart.File, h *multipart.FileHeader) interface{} { //根据字节直接处理文件 这个是前端传递的二进制流s.FileProcessInit() //文件初始化 设置原来文件…
阅读更多...
代码随想录算法训练营第三十九天| 62 不同路径 63 不同路径 ||

代码随想录算法训练营第三十九天| 62 不同路径 63 不同路径 ||

目录 62 不同路径 63 不同路径 || 62 不同路径 class Solution {public int uniquePaths(int m, int n) {int f[][] new int[m][n];for(int i 0;i < m;i)f[i][0] 1;for(int i 0;i < n;i)f[0][i] 1;for(int i 1;i < m;i){for(int j 1;j < n;j){f[i][j] …
阅读更多...
什么是Ros（三）- 常用工具简介

什么是Ros（三）- 常用工具简介

库&#xff1a;用于机器人的感知、运动控制、导航、仿真等领域。一些常用的库包括OpenCV、PCL&#xff08;Point Cloud Library&#xff09;、MoveIt、Gazebo等。 调试工具&#xff1a;&#xff08;如启动roslaunch、数据记录rosbag&#xff09; 可视化工具&#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…
阅读更多...
FindSecBugs支持的检测规则

FindSecBugs支持的检测规则

很多SAST集成了FindSecBugs这个开源工具&#xff0c;其好处是直接对Class文件进行检测&#xff0c;也就是直接检测二进制问题&#xff0c;可以直接检测war、jar&#xff0c;还是非常方便的。虽然误报率较高&#xff0c;但是这些检测出来的安全漏洞很多是安全从业人员耳熟能详的…
阅读更多...
【SpringBoot】讲清楚日志文件lombok

【SpringBoot】讲清楚日志文件lombok

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

linux 内核进程管理介绍

Linux内核进程管理是操作系统中非常重要的一部分&#xff0c;它负责管理和调度系统中的进程。本文将介绍Linux内核进程管理的工作原理、调度算法等方面的内容。 一、进程的创建和销毁 在Linux中&#xff0c;进程的创建通过fork()系统调用完成。fork()会创建一个子进程&#xf…
阅读更多...
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算法…
阅读更多...
单页面应用

单页面应用

单页面应用 1.什么是SPA 多页面应用&#xff1a;每个页面都是独立的html文件&#xff0c;页面切换是整体刷新&#xff0c;需要重新加载html、css、JS等文件&#xff0c;容易实现搜索引擎&#xff0c;数据通过url、cookie、localStore传递。 单页面应用&#xff1a;多个页面是…
阅读更多...
redis.conf官方配置文件及sentinel.conf官方配置文件

redis.conf官方配置文件及sentinel.conf官方配置文件

目录 redis.conf配置文件 sentinel.conf配置文件 版本7.0.14 redis.conf配置文件 # Redis configuration file example. # # Note that in order to read the configuration file, Redis must be # started with the file path as first argument: # # ./redis-server /pat…
阅读更多...
最新文章

Copyright @ 2022~2023