js点击特效【js特效插件】 收藏 0

前端开发工程师入门必做的JavaScript开关灯特效

首先，我们看看最终效果：

视频加载中…

开始前，你需要准备两张图片

关灯，开灯

接着，我们需要整理一下思路。

1. 确定事件：点击事件

2. 确定对象：HTML标签

3. 事件驱动对象，截取字符，再赋值

HTML代码如下：

<img src=\”images/eg_bulboff.gif\” id=\”deng\”/>

<input type=\”button\” value=\”开/关灯\” onclick=\”light()\” />

JavaScript代码如下：

<script>

function light(){

//如果是开灯就变成关灯，否则就是开灯

// alert(12132);

//1.获取id对象

var lig=document.getElementById(\’deng\’);

//2.获取id对象的属性

var img=lig.src;

// alert(ligh.substr(-7)); //substr 截取字符串off.gif

//3.截取字符串

if(img.substr(-7)==\”off.gif\”){

lig.src=\”images/eg_bulbon.gif\”;

}else{

lig.src=\”images/eg_bulboff.gif\”;

}

}

</script>

免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上欢乐庆祝场景

今天看科技周刊看到的一个酷炫的动效库，使用简单，视觉效果很好，推荐给大家。

Canvas Confetti 是一个基于 JavaScript 的特效动画库，可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效，开发者通过简单的几行代码就可以实现这些动效。

基础效果

• 内置的粒子系统、模拟重力、衰减、漂移等算法，完美模拟了纸屑飘落的效果，呈现出了媲美游戏的视觉效果；
• 五彩飞舞动画基于 HTML5 的 canvas 元素实现，兼容性不错；
• 除了内置的纸屑，也支持自定义纸屑的形状，图片、SVG和文字都支持；

我们都知道 CSS3 的动画很强大，但想要实现类似于抛撒碎纸屑这么复杂的动画时，CSS3 来实现就显得很困难了，以前我遇到这种需求，都是考虑通过 hilo.js 这样的 H5 游戏引擎中的粒子系统来实现。不过今天看阮一峰老师的科技周刊，看到他推荐了一款专门用来实现抛撒五彩纸屑动效的工具库，研究了一下发现效果很好，使用也简单，于是决定写一篇文章推荐给大家。

也可以在 HTML 的直接引入 js 文件：

通过下面几行代码就可以简单实现一个抛撒五彩纸屑的特效动画：

Canvas Confetti 的动画是在网页上创建了一个铺满全屏的画布（canvas），这个 canvas 是无法响应事件的，比如无法点击，这样就相当于覆盖了一个纯视觉的动画层，完全不影响原有的网页界面。

需要注意的是，Canvas Confetti 是一个 JS 工具库，但只能运行在客户端（浏览器环境），是不能运行在 Node.js 这样的服务端的。另外，Canvas Confetti 实例化后的对象返回的是 Promise 对象，现代浏览器都支持，但老旧的浏览器（如 IE）是不支持的，如果要在这些浏览器上运行，一般需要使用 Promise 的 polyfills 来保证正常支持 Promise。

一般来说，只需要搞懂下面几个参数就可以满足场景的庆祝场面，我总结了一下，见下面的表格：

主要参数说明

烟花效果

即把五彩纸屑替换成金色的星星。

粒子图案是星星

下面代码实现的是让白色的纸屑像雪花一样飘落满屏的效果，多在浪漫温馨的场景中使用。

雪花飘落效果

总之这个工具库功能真的很强大，上面几个都是很酷炫的效果，更多效果可以自己去尝试。

Canvas Confetti 是一个免费开源的 JS 动画特效工具库，项目源码基于 ISC 许可协议托管在 Github 上，我们可以自由地下载来使用，也可以免费授权用于商业项目。

↓↓点击查看本次分享的网站。

Canvas Confetti – 免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上实现欢乐庆祝的场景

ThingJS粒子特效一键实现雨雪效果

1、粒子效果

2、加载场景

3、不同粒子效果实现

在做3D项目时，我们经常需要模拟下雨，下雪的天气，有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果，比如：下雨、下雪（可以控制雨雪大小）、喷水、火焰效果等，甚至可以通过对接第三方的数据，实时控制三维场景的效果（比如：对接天气接口）。

1、粒子效果

ThingJS 提供 ParticleSystem 物体类来实现粒子效果。自己制作粒子效果需要图片处理、写代码、3D渲染， 是个很艰巨的任务，需要掌握大量 3D 算法知识，还要掌握 shader 语言。ThingJS封装了粒子效果的实现方法，减少了代码量和开发投入，更受3D开发初学者的欢迎，直接用query查询API接口，在场景中加入火焰效果。

ThingJS内置一些粒子效果可以直接调用,可点击在线开发选择代码块进行调用。

2、 加载场景

CampusBuilder（又称模模搭）搭建场景完成后，在ThingJS直接加载url进行二次开发。

3、不同粒子特效实现

• 火焰效果

代码如下：

• 飘雪效果

代码如下：

• 喷水效果

代码如下：

• 降雨效果

代码如下：

雨雪天气，是通过粒子图片渲染来实现的，我们可以通过控制粒子数量的最大密度和最小密度来实现降雨降雪量大小。

• 清除粒子效果

结尾：

ThingJS面向物联网的3D可视化开发平台拥有强大的物联网开发逻辑，ThingJS 为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。使用者通过接入平台api，轻松集成3D可视化界面，场景搭建-在线开发-数据对接-项目部署，让开发更高效！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com