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学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python程序运行原理图文解析
2018/02/10 Python
Python中property函数用法实例分析
2018/06/04 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python模块的制作方法实例分析
2019/12/21 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
查环查孕证明
2014/01/10 职场文书
计划生育标语
2014/06/23 职场文书