Native JS implements bellows demo and encapsulates a motion framework (instance code)

Statement: The DEMO relies on a training institution and is very grateful for this training structure. Without further ado, now we will start to change the production of the demo.

First of all, in the front-end learning process, carousel images are something we must learn, so in order to more efficiently implement various carousel images, a motion framework is encapsulated.

function getStyle(obj,attr) {
  if(){
    return [attr];//In order to obtain the attribute value under IE  }else{
    return (obj,null)[attr];//In order to obtain the attribute value under the W3C browser  }
}

function animate(obj,json){
  clearInterval();
   = setInterval(function () {
    var flag = true;
    var current = 0;
    for(var attr in json){
      if(attr == 'opacity'){
        current = parseInt(getStyle(obj,attr)*100);
      }else{
        current = parseInt(getStyle(obj,attr));
      };

      var step = (json[attr] - current) / 10;
      step = step &gt; 0 ? (step) : (step);
      //First determine whether the attribute is transparent      if(attr == 'opacity'){
        //First determine whether the browser supports opacity        if('opacity' in ){
           = (current + step) / 100;
        }else{
           = 'alpha(opacity = ' + (current + step) + ')';
        }
      //Select whether the attribute is z-index      }else if(attr == 'zIndex'){
         = json[attr];
      //Finally make a judgment      }else{
        [attr] = current + step + 'px';
      }

      if(current != json[attr]){
        flag = false;
      }
    }

    if(flag){
      clearInterval();
    }
  },5);
}

This framework is compatible with different browsers and allows properties like opacity and z-index to be passed in. Of course, common properties like width, height, left, right are essential. With this framework, you can achieve great results. So now we start to do the DEMO formally.

First of all, the production.

<div >
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

The production is very simple. We will insert the picture as the background image of Li in JavaScript. After that, we adjust the CSS style.

*{
    margin:0px;
    padding:0px;
  }
  #box{
    width:1300px;
    height:400px;
    margin:100px auto;
    overflow: hidden;
  }
  #box ul{
    height:400px;
    width:1300px;
  }
  #box ul li{
    width:240px;
    height:400px;
    float:left;
    overflow: hidden;
  }

The code for javascript is as follows:

 = function () {
    var box = ('box');
    var aLi = [0].children;
    for(var i=0;i<;i++){
      aLi[i]. = 'url(' + 'images/' + (i + 1) + '.jpg';
      aLi[i].onmouseover = function(){
        for(var i=0;i<;i++){
          animate(aLi[i],{width:100});
        }
        animate(this,{width:800});
      };
      aLi[i].onmouseout = function(){
        for(var i=0;i<;i++){
          animate(aLi[i],{width:240});
        }
      }
    }
  }

This way, the bellows effect demo implemented using native JS is realized. Of course, the encapsulated animate framework can also be used to achieve carousel effects similar to NetEase.

The above article is a bellows-style demo that implements a sports framework (example code) and encapsulates a sports framework (example code) which is all the content I share with you. I hope you can give you a reference and I hope you can support me more.