纯Javascript实现鼠标点击特效(烟花特效)
Javascript实现鼠标点击特效(烟花特效)
一、实现效果
让我们先来看看实现效果,如下图:
二、实现步骤
- 在项目文件夹中新建js文件,例如×××.js
- 复制具体代码到×××.js文件中
- 在html文件head标签中引用js文件
<head>
...
<script src="×××.js"></script>
...
</head>
三、JavaScript代码
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();//调用特效函数
纯Javascript实现鼠标点击特效(烟花特效)相关推荐
- html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
- JS实现鼠标点击处烟花爆炸效果
JS实现鼠标点击处烟花爆炸效果(面向对象版) 程序由网上开源"JS实现放烟花效果"代码改编,实现在鼠标点击处出现烟花爆炸效果. 改编前 源码link https://github. ...
- 纯js代码,制作炫酷烟花特效。快给你的朋友瞧瞧吧!
首先我们来看看烟花最终实现的效果 是不是很有意思呢,接下来就来讲解实现烟花特效所需的步骤: 实现步骤: 首先我们将html与body填满整个屏幕 <style>html,body{pa ...
- html鼠标滑过导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
- 爱心点击特效php代码,网页点击特效 - 鼠标点击浮现爱心特效
/*7Core-CN - 网页鼠标点击特效(爱心)*/ !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) ...
- php鼠标点击事件,javascript模拟鼠标点击事件的实例代码
javascript触发模拟鼠标点击事件 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法. 一般 ...
- unity鼠标点击显示粒子特效
参考链接:(51条消息) unity 两个相机叠加 - CSDN (51条消息) [Unity]鼠标点击在屏幕上产生特效_SuperWiwi的博客-CSDN博客_unity点击特效 (51条消息) U ...
- php网页点击特效,网站鼠标点击炫酷特效分享
今天给大家分享的是一个非常有意思的网页鼠标点击特效,具体效果如下: 总得来说这个特效还是非常棒的,颜色搭配清新,效果也比较炫酷,喜欢的小伙伴可以在下方进行下载. 演示地址:http://img.hel ...
- [JavaScript]获取鼠标点击区域的相对、绝对位置坐标
注:需要引入jQuery <!DOCTYPE html> <html> <head><script type="text/javascript&qu ...
- JavaScript类——鼠标点击下笑脸变化
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charse ...
最新文章
- Spring JDBC-混合框架的事务管理
- 物料编码原则有码还是无码
- javascript中的继承方式
- 厦门理工学院2019年数据结构与算法考研初试大纲
- php里面12小时制和24小时制的选择方法
- python3 爬虫第三步 本文包你学会正则 不会就来锤我
- 初识设计模式(装饰者模式)
- 可以上传视频的网站大全
- Sqlserver学习研究
- Idea中上传项目到Github
- 亚马逊出的平板电脑_加量不加价,亚马逊推出新款 Fire 7 平板电脑
- 网络工程师Day6--实验3-2 NAT配置
- 手机页面内容超出屏幕宽度时实现可拖拉滑动效果
- 4月23 nuTonomy的语义层(人行横道,人行道,交通信号灯,停车线,车道等)的扩展包
- Vue+elementUI导出xlsl表格,支持复杂表头,自动合拼单元格。xlsx+file-saver插件
- lenovo启动热键_联想电脑如何进入U盘启动,按哪个快捷键?
- Ubuntu安装wine
- 前端开发工程师,CSS盒子模型居中方法
- 四级高频词汇360个
- python数据预处理 样本分布不均(过采样和欠采样)
热门文章
- 用图片签名时,如何解决签名的图片会盖住内容的问题
- ACM第四站————最小生成树(普里姆算法)
- 对于von Mises distribution(冯·米塞斯分布)的一点心得
- 一步一步安装及配置R及Rstudio(详细图文)
- 我设计的五笔日本语输入法和韩语输入法初稿图
- Xcode No certificate for team ‘xxx‘ matching ‘iPhone Developer: xxx (xxx)‘
- innodb_io_capacity、innodb_io_capacity_max 的影响
- 全球及中国石头纸行业发展动态与投资现状分析报告2022版
- python自加自减_自增自减运算符详解
- 无法复制:数据错误(循环冗余检查)的解决方法