Based on native js fade function encapsulation (compatible with IE)-JS Tutorial-php.cn

Based on native js fade function encapsulation (compatible with IE)

高洛峰

Release： 2016-12-09 15:08:34

Original

1006 people have browsed it

During the development process, if we want to have a fade-in and fade-out effect, we can completely use jQuery’s fadeTo() method. But our goal is not just to use it, but to understand the underlying logic of the program. This article mainly uses native javascript to achieve the fade-in and fade-out effect.

Building the framework is basically not difficult.

<!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>

Copy after login

The main difficulty in writing the javascript part is the changeOpacity() function.

window.onload = function (){
 var box = document.getElementById(&#39;box&#39;);
 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[&#39;opacity&#39;]*100;
 }
 else{//其他浏览器
  opa = getComputedStyle(box,false)[&#39;opacity&#39;]*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=&#39;alpha(opacity:&#39;+(opa+speed)+&#39;)&#39;;
  }
  //目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
  //设置透明度直接为目标值，同时清除定时器
  else{
   box.style.opacity=target/100;
   box.style.filter=&#39;alpha(opacity:&#39;+target+&#39;)&#39;;
   clearInterval(box.timer);
  }
  //直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度
  opa=opa+speed;
 },30);
}

Copy after login

The principle of this transparency function is generally the same as the motion function. Summarized in three steps:
1. Get the current value and determine the step size based on the target value and current value;
2. The process of change, changing one value each time (the step sizes of gradient animation and transparency are different values, while uniform animation and the transparency step is a fixed value);
3. Determine whether the target value is reached, and if it is reached, clear the timer and end.

So if you don’t understand the principle, you can read another article about JavaScript uniform animation and buffer animation.
The biggest difficulty when understanding the principle should be obtaining the current transparency (assignment is relatively simple). To get the transparency value, we have to consider two situations:

1. IE. Although the opacity attribute is not supported in IE, we can get its value through box.currentStyle['opacity']. At the same time, we When writing, the value for opacity will also be written into css, although IE will not change the transparency due to changes in the opacity value.
2. Other browsers. Other browsers support the opacity attribute, so our operation is relatively simple. Writing and reading only target opacity.

Next, let’s talk about the operation in IE browser in detail:

First of all, there are two attribute values in our css file that are useful in our operation: opacity: .3; filter: alpha(opacity:30); Obviously it is difficult to get the opacity value in the filter attribute (I don't know how!), but it is relatively simple if we use currentStyle to get the opacity. So I conducted a test and found that although IE does not support this attribute, there is no problem reading and writing this attribute value, so the problem is solved! We can read the current transparency through opacity, and then change the transparency through filter. At the same time, we change the value of opacity (not only for compatibility with other browsers, but also after we write it, the IE browser can obtain the current transparency the next time it is moved in. Transparency, otherwise the initial opacity value is obtained). So isn't it the same problem as the animation?