前端开发工程师入门必做的JavaScript开关灯特效
首先，我们看看最终效果：
视频加载中…
开始前，你需要准备两张图片
关灯，开灯
接着，我们需要整理一下思路。
-
确定事件：点击事件
-
确定对象：HTML标签
-
事件驱动对象，截取字符，再赋值
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>
Duang特效插件：duang.js
不知道怎么的，这两天看到各种新闻都夹杂着“Duang”新词，不管是科技新闻还是娱乐新闻，“Duang”的身影如影随形，这个“Duang”究竟从何而来？是怎么火的？我特意查询了一下，原来是这么回事：
（摘自互联网对Duang的描述）
这次恶搞的主要内容来自成龙的一段采访视频：“当我第一次知道要拍洗发水广告的时候，其实我是拒绝的……导演跟我讲，拍完加特技，头发很黑很亮很柔……之后呢，头发duang duang duang”随后，成龙微博被大量网友用“duang duang ”留言攻陷。2月26日晚间，成龙在转发微博时用“duang”自嘲又引发了大量网友围观。段子手和网友们也都“再接再厉”，尽情发挥，相继编出了各种有趣的延伸版本，奠定了“duang”在2015年新年后的第一网络热词的地位。
更有趣的是，切图网率先根据“Duang”的解释“加特效”完成了一次概念到视觉效果的展现，将网页中的dom元素，通过js模拟了弹性物体向地面掉落时候的情景，“duang duang duang”不停。
已经集成为一款jQuery插件，支持回调函数，和延时Duang~
duang插件：http://www.qietu.com/p/duang.js
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
