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>

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可视化界面，场景搭建-在线开发-数据对接-项目部署，让开发更高效！

js实现波浪效果

先看效果图：

视频加载中…思路分析：

• html

该js特效的核心元素为两个波浪形图片，图片所在的div块以不同速度移动即可出现上图所示的海面波浪视觉效果。

分析：两个波浪形图片如下，图片宽度均为1920px

wave-01.png（1920*60）

wave-02.png（1920*60）

在分辨率为1920*1080的显示器下，一张宽1920像素的图片刚好占满屏幕的宽度。两张wave-01.png图片并排则占据1920*2像素，即width为200%，故需设置width>=200%使图片并排不换行，然后设置overflow：hidden使浏览器下方不出现滚动条（设置原因后面会有解释）。此时深蓝色波浪块已定位好，接下来定位浅蓝色波浪块，浅蓝色波浪块同样由两个并排图片块组成，由效果图可知，初始时深浅两个波浪块应重叠：

重叠图

即设置两个波浪块的左偏移量和上偏移量相同，属性设置如下：外层包裹波浪块的div使用相对定位position: relative，相应地，内层两个波浪块均使用绝对定位position: absolute并设置left:0;top:0;此时深浅两个波浪块效果如上图。

html代码如下：

html

• css

css

• js

分析：要实现动态波浪效果，需要使两个波浪块移动，以不同的速度移动效果更好。

下图js代码中定义了一个marqueeScroll()函数表达式，该函数内部有两个方法，一个是Marquee()，一个是setInterval()。

Marquee()方法：当波浪块的左偏移量小于1920px时，则波浪块向左移动1px；否则，将波浪块的左偏移量重置为0。

setInterval() 方法：按照指定的周期（以毫秒计）来调用函数。深蓝色波浪块每40ms左偏移1px，浅蓝色波浪块每20ms左偏移1px。

Marquee方法中出现了scrollLeft() 方法，此方法获取或设置匹配元素相对滚动条左侧的偏移(offset)量。上文提到过设置波浪块属性overflow为hidden，因为外层宽度为100%，波浪块宽度大于200%，如不设置该属性则浏览器会出现滚动条，而测试证明，scrollLeft()方法是只有当内部元素超出父级元素且浏览器底部无滚动条的时候才有效，否则将一直为0，设置了也无效。

波浪动画

波浪块的初始偏移量为0，因此会以设置好的周期每次向左偏移1px，当偏移量达到1920px时，此时屏幕中呈现的是并排的第二张图片，此时将波浪块的偏移量重置为0，保证了连续的波浪效果。

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