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


Posted in Javascript onMarch 19, 2018

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

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

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

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

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

Javascript 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
react-native-video实现视频全屏播放的方法
Mar 19 #Javascript
vue实现树形菜单效果
Mar 19 #Javascript
VUE重点问题总结
Mar 19 #Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
You might like
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue引入axios同源跨域问题
2018/09/27 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python已协程方式处理任务实现过程
2019/12/27 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
酒店副总岗位职责
2013/12/24 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
公司离职证明标准范本
2014/10/05 职场文书
雾霾停课通知
2015/04/24 职场文书
第一军规观后感
2015/06/12 职场文书