JavaScript

超轻量级php框架startmvc

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

更新时间:2020-07-03 02:24:01 作者:startmvc
说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果

说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库?或者说我通过用原生js实现一些函数来提高自己~

所以,我简单的研究了一下纯js代码写淡入淡出的效果。

如果出现错误,请在评论中指出,我也好自己纠正自己的错误

 

(一)FadeIn淡入函数

淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现这种效果。

所以我们提取出两个必要的东西:setInterval()、opacity、以及speed。

  • speed : 这个是我们设置opacity的值从0到1的float数值变化速度
  • 淡入的逻辑:opacity的值从0到1的float数值变化。

我们来先看代码实现!

html:


<div id="div1"></div>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

css样式


<style>
 div {
 width: 100px;
 height: 100px;
 background-color: #1d7db1;
 opacity:0;
 }
 </style>

首先我们来看fadeIn函数的第一版的写法:先了解一下实现的思路


function fadeIn(ele, speed) {
 let num = 0;
 let time = setInterval(() => {
 num += speed;
 ele.style.opacity = num / 100;
 if (num >= 100) {
 clearInterval(time); // 清楚定时器
 }
 }, 30);
 }
}

当这个效果暂时实现以后,有些东西并没有那么简单。如果发生多次的触发效果,会出现setInterval被多次同时使用,出现一些让人头疼的BUG。

要解决这个问题,目前有一个方案:添加一个全局状态,防止多次触发setInterval。


let Fadeflag = true;
function fadeIn(ele, speed) {
 let num = 0;
 if (Fadeflag) {
 let time = setInterval(() => {
 num += speed;
 Fadeflag = false;
 ele.style.opacity = num / 100;
 if (num >= 100) {
 clearInterval(time);
 Fadeflag = true;
 }
 }, 30);
 }
}

兼容性问题!!!

先看代码


set: function(elem, num) {
 elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')';
}

注:代码设置num/100是因为我们以ie为标准去兼容ff和GG

js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)

ie的filter范围是0~100

opacity=value/100(兼容FF和GG)。

FF和GG的opacity是0~1 (为了兼容ie的filter范围,我们用num/100)

(二)FadeOut淡出函数

speed : 这个是我们设置opacity的值从1到0的float数值变化速度(记得考虑兼容性)

淡出的逻辑:opacity的值从1到0的float数值变化。

封装函数


(function() {
 let fadeFlag = true;
 function Fade(selector) {
 this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
 }
 Fade.prototype = {
 constructor: Fade,
 setOpacity: (elem, opacity) => { // 兼容ie10—
 elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')': elem.style.opacity = opacity / 100;
 return true;
 },
 setOpacity: function(num) {
 this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
 },
 fadeIn: function(speed, opacity){
 /*
 speed ==>淡入的速度,正整数(可选);
 opacity ==>淡入到指定的透明度,0~100(可选);
 */
 speed = speed || 2;
 opacity = opacity || 100;
 let num = 0; // 初始化透明度变化值为0
 if (fadeFlag) {
 let time = setInterval(() => {
 num += speed;
 fadeFlag = false;
 this.setOpacity(num);
 this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
 if (num >= opacity) {
 clearInterval(time);
 fadeFlag = true;
 }
 }, 20);
 }
 },
 fadeOut: function(speed, opacity) {
 /*
 speed ==>淡入的速度,正整数(可选);
 opacity ==>淡入到指定的透明度,0~100(可选);
 */
 speed = speed || 2;
 opacity = opacity || 0;
 let num = 100; // 初始化透明度变化值为0
 if (fadeFlag) {
 let time = setInterval(() => {
 num -= speed;
 fadeFlag = false;
 this.set(num);
 this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
 if (num <= opacity) {
 clearInterval(time);
 fadeFlag = true;
 }
 }, 20);
 }
 }
 };
window.Fade = Fade;
})();

测试实例:


let btn = document.getElementsByTagName('button')[0];
 let btn2 = document.getElementsByTagName('button')[1];
 btn.onclick = () => {
 let fade = new Fade('div1');
 fade.fadeIn();
 };
 btn2.onclick = () => {
 let fade = new Fade('div1');
 fade.fadeOut();
 }

总结

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