基于原生js淡入淡出函数封装（兼容IE）

2019/6/27 21:41:59

编程Tag： js 淡入淡出

本文主要是介绍基于原生js淡入淡出函数封装（兼容IE），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。

构建框架，基本没难度。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>透明度函数的封装</title> 
  <style type="text/css"> 
   #box{ 
    width: 200px; 
    height: 200px; 
    background: red; 
    margin: 50px auto; 
    opacity: .3; 
    filter: alpha(opacity:30); 
   } 
  </style> 
 </head> 
 <body> 
  <div id="box"></div> 
  <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script> 
 </body> 
</html>

编写javascript部分，主要难点是changeOpacity()函数。

window.onload = function (){ 
 var box = document.getElementById('box'); 
 box.onmouseover = function (){ 
  changeOpacity(this,100); 
 } 
 box.onmouseout = function (){ 
  changeOpacity(this,30); 
   
 } 
} 
/** 
 * 
 * @param {Object} box 要变化透明度的元素 
 * @param {Object} target 透明度的目标值（100为最高） 
 */ 
function changeOpacity(box,target){ 
 var opa; 
 var speed; 
 if(box.currentStyle){ 
  //判断浏览器类型，此类型为IE浏览器，即使IE不支持opacity属性，但是仍然可以获取值 
  opa = box.currentStyle['opacity']*100; 
 } 
 else{//其他浏览器 
  opa = getComputedStyle(box,false)['opacity']*100; 
 } 
 //透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负 
 target-opa>=0?speed=1:speed=-1; 
 clearInterval(box.timer); 
 box.timer = setInterval(function (){ 
  //目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长 
  if(Math.abs(target-opa)>=Math.abs(speed)){ 
   box.style.opacity=(opa+speed)/100; 
   box.style.filter='alpha(opacity:'+(opa+speed)+')'; 
  } 
  //目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位， 
  //设置透明度直接为目标值，同时清除定时器 
  else{ 
   box.style.opacity=target/100; 
   box.style.filter='alpha(opacity:'+target+')'; 
   clearInterval(box.timer); 
  } 
  //直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度 
  opa=opa+speed; 
 },30); 
}

这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步：
1、获取当前值，根据目标值和当前值确定步长；
2、变化的过程，每次变化一个值（渐变动画和透明度其步长为不同的值，而匀速动画和透明度步长为定值）；
3、判断是否达到目标值，达到则清除定时器，结束。

所以如果原理弄不清楚可以看一下另一篇文章javascript匀速动画和缓冲动画。
而在理解原理的情况下最大的难点应该是当前透明度的获取了（赋值比较简单）。获取透明度的值我们要考虑两种情况：

1、IE，虽然在在IE下不支持opacity属性，但是我们是可以通过box.currentStyle['opacity']获取到它的值的，同时我们在写入的时候也会将给opacity的值写入css中，尽管IE不会因为opacity值的改变而变化透明度。
2、其他浏览器，其他浏览器是支持opacity属性，所以我们操作相对简单了许多，写入和读取都针对opacity即可。

接下来细讲在IE浏览器中的操作：

首先我们的css文件中有两个属性值在我们的操作中是有用的 opacity: .3; filter: alpha(opacity:30); 显然我们很难获取filter属性中的opacity值（我不会！），但是如果我们使用currentStyle来获取opacity是比较简单的。所以我进行了测试发现，尽管IE不支持这个属性，但是这个属性值的读取和写入时完全没问题的，所以，问题就迎刃而解了！我们通过opacity可以读取当前透明度，然后通过filter改变透明度，同时，我们改变opacity的值（不仅是为了兼容其他浏览器，同时我们写入以后IE浏览器中在下次移入的时候还可以获取当前的透明度，否则的话获取的是初始的opacity值）。那么下面不就和动画那个问题一样了？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持找一找教程网。

这篇关于基于原生js淡入淡出函数封装（兼容IE）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

基于原生js淡入淡出函数封装（兼容IE）

相关编程文章