javascript原生封装了一个具有淡入淡出效果的函数测试用例代码

说到js的逐渐显示和消失，大部分朋友都会想到JQuery中的fadeIn()，fadeOut()或者fadeToggle()。但是如果调用巨大的JQuery库只是为了引入这样的效果呢？或者我可以用原生js实现一些功能来提升自己~

因此，我简单研究了纯js代码的淡入淡出效果。

如果有错误，请在评论中指出，这样我就可以纠正自己的错误。

(一)淡入淡出功能

淡入淡出效果其实是一个setInterval()，可以通过循环DOM操作改变元素对象节点的透明度来实现。

所以我们提取了两个必要的东西：setInterval()，不透明度和速度。

速度：这是我们将不透明度的浮动值从0设置为1以淡入的逻辑：不透明度的浮动值从0变为1。我们先来看看代码实现！

html:

div id=' div 1 '/div span id=' span 1 ' 123/span button fadein/button fadeout/button ss样式

style div { width: 100px高度： 100像素；背景-color : # 1d 7d B1；opacity:0} /style首先我们来看看fadeIn函数的第一个版本：首先了解一下实现的思路

函数fadeIn(ele，speed){ let num=0；让时间=设置间隔(()={ num=速度；ele . style . opacity=num/100；if (num=100) { clearInterval(时间)；//清除定时器} }，30)；}}当这个效果暂时实现的时候，有些事情就没那么简单了。如果触发效果多次出现，setInterval会同时使用多次，会出现一些头疼的bug。

要解决这个问题，目前有一个解决方案：增加一个全局状态，防止setInterval被多次触发。

让Fadeflag=true函数fadeIn(ele，speed){ let num=0；if(Fadeflag){ let time=set interval(()={ num=speed；Fadeflag=falseele . style . opacity=num/100；if (num=100) { clearInterval(时间)；Fadeflag=true} }, 30);}}兼容性问题！

先看看代码

set:函数(elem，num) { elem.style.opacity！==未定义？elem.style .不透明度=num/100 : elem . style . filter=' alpha(不透明度=' num ')'；}注意：代码设置num/100是因为我们兼容基于ie的ff和GG

js中设置DOM节点透明度的函数属性：filter='alpha(不透明度=' value ')'(兼容ie)

ie的过滤范围为0~100

不透明度=值/100(兼容FF和GG)。

FF和GG的不透明度为0~1(为了与ie的滤镜范围兼容，我们使用num/100)

(2)淡出淡出功能

速度：这是我们将浮点值从1设置为0的速度(记得考虑兼容性)

淡出的逻辑：不透明度的值从浮点值1变为0。

封装功能

(函数(){ 0让fadeFlag=真函数淡入淡出（选择器){ this.elem=选择器类型=='对象'？选择器： document.getElementById(选择器);}褪色。原型={构造函数： Fade，设定值：(elem，不透明度)={ //兼容ie10— elem.filters？elem.style.filter='alpha(不透明度='不透明度)' : elem.style。不透明度=不透明度/100;返回真；}，设置容量：函数{ this.elem.style.opacity！==未定义？这. elem.style。不透明度=num/100 : this。艾伦。风格。filter=' alpha(不透明度=' num ')'；}，fadeIn:函数（速度，不透明度){ /*速度==淡入的速度，正整数（可选);不透明度==淡入到指定的透明度，0~100(可选);*/speed=speed | | 2；不透明度=不透明度| | 100;让num=0；//初始化透明度变化值为0 if(淡入淡出标志){ let time=setInterval(()={ num=speed；fadeFlag=falsethis。设置容量(数量)；这. elem.style。不透明！==未定义？这. elem.style。不透明度=num/100 : this。艾伦。风格。filter=' alpha(不透明度=' num ')'；if (num=不透明度){ clearInterval(时间);fadeFlag=真；} }, 20);} }，fadeOut:函数（速度，不透明度){ /*速度==淡入的速度，正整数（可选);不透明度==淡入到指定的透明度，0~100(可选);*/speed=speed | | 2；不透明度=不透明度| | 0;设num=100/初始化透明度变化值为0 if(淡入淡出标志){ let time=setInterval(()={ num-=speed；fadeFlag=falsethis。set(num)；这. elem.style。不透明！==未定义？这. elem.style。不透明度=num/100 : this。艾伦。风格。filter=' alpha(不透明度=' num ')'；if (num=不透明度){ clearInterval(时间);fadeFlag=真；} }, 20);} } };窗户。褪色=褪色；})();测试实例：

让BTN=文件。getelementsbytagname(' button ')[0]；让BTN 2=文档。getelementsbytagname(' button ')[1]；BTN。onclick=()={ let Fade=new Fade(' div 1 ')；褪色。FADEIN()；};BTN 2。onclick=()={ let Fade=new Fade(' div 1 ')；褪色。淡出()；}总结

以上所述是小编给大家介绍的爪哇岛描述语言原生封装一个淡入淡出效果的函数测试实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！