脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript原生封装一个淡入淡出效果的函数

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

 更新时间：2018年03月19日 11:29:33   作者：thomaszhou  
这篇文章主要介绍了javascript原生封装一个淡入淡出效果的函数,主要有FadeIn淡入函数和FadeOut淡出函数，需要的朋友可以参考下

说到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原生封装一个淡入淡出效果的函数测试实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • setTimeout的延时为0时多个浏览器的区别

    setTimeout的延时为0时多个浏览器的区别

    一直比较迷惑：js的setTimeout到底会在什么时候执行，如果执行了，和主执行脚本到底差多长时间
    2012-05-05
  • 整理JavaScript创建对象的八种方法

    整理JavaScript创建对象的八种方法

    JavaScript创建对象的方法有很多种，本文给大家介绍javascript创建对象的八种方法，对javascript创建对象感兴趣的朋友可以参考下本篇文章
    2015-11-11
  • layui操作列按钮个数和文字颜色的判断实例

    layui操作列按钮个数和文字颜色的判断实例

    今天小编就为大家分享一篇layui操作列按钮个数和文字颜色的判断实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能

    JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能

    这篇文章主要介绍了JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能的相关资料,需要的朋友可以参考下
    2017-06-06
  • d3.js实现立体柱图的方法详解

    d3.js实现立体柱图的方法详解

    这篇文章主要给大家介绍了利用d3.js实现立体柱图的方法，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
    2017-04-04
  • 如何将一维度数组转换成三维数组结构

    如何将一维度数组转换成三维数组结构

    在开发过程中,可能会遇到需要将一维数组转换为多维数组的情况,以满足特定数据结构的需求,文章介绍了如何将后端返回的一维列表数据通过编程方法转换成三维数组结构,以适应特定的UI展示需求,通过循环遍历和数据重组的方式,可以有效地实现数组结构的转换
    2024-09-09
  • three.js利用gpu选取物体并计算交点位置的方法示例

    three.js利用gpu选取物体并计算交点位置的方法示例

    这篇文章主要给大家介绍了关于three.js利用gpu选取物体并计算交点位置的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-11-11
  • underscore之function_动力节点Java学院整理

    underscore之function_动力节点Java学院整理

    因为underscore本来就是为了充分发挥JavaScript的函数式编程特性，所以也提供了大量JavaScript本身没有的高阶函数。本文重点给大家介绍underscore之function知识，感兴趣的的朋友一起学习吧
    2017-07-07
  • 仿iPhone通讯录制作小程序自定义选择组件的实现

    仿iPhone通讯录制作小程序自定义选择组件的实现

    这篇文章主要介绍了仿iPhone通讯录制作小程序自定义选择组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript在form表单中使用button按钮实现submit提交方法

    JavaScript在form表单中使用button按钮实现submit提交方法

    在form表单提交中，使用button来间接完成submit的提交更为灵活。接下来通过本文给大家介绍JavaScript在form表单中使用button按钮实现submit提交方法，需要的朋友参考下吧
    2017-01-01

最新评论