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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jQuery知识点整理
Jan 30 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
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
重置版宣传动画
2020/04/09 魔兽争霸
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
快速了解Python中的装饰器
2018/01/11 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
电教室标语
2014/06/20 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
诉讼授权委托书
2014/10/15 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫