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

<div id="div1"></div>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>

<style>
 div {
  width: 100px;
  height: 100px;
  background-color: #1d7db1;
  opacity:0;
 }
 </style>

function fadeIn(ele, speed) {
  let num = 0;
  let time = setInterval(() => {
    num += speed;
    ele.style.opacity = num / 100;
    if (num >= 100) {
     clearInterval(time); // 清楚定时器
    }
  }, 30);
  }
}

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 "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' "htmlcode">

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