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 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JSONP之我见
Mar 24 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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获取当前url的具体方法全面解析
2013/11/26 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
php获取随机数组列表的方法
2014/11/13 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python中xlrd模块的使用详解
2021/02/01 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
十八大闭幕感言
2014/01/22 职场文书
信息技术教学反思
2014/02/12 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android