The native JS realizes the Bellows type demo, and encapsulates a motion frame (instance code) _javascript skill

Statement, the demo relies on a training organization, thanks to this training structure. Words do not say much, now began to change the production of the demo.

First of all, in the front-end learning process, the carousel map is we must learn, so in order to more efficient implementation of a variety of carousel map, encapsulating a moving frame.

function GetStyle (obj,attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];//to get the property value under IE}else{return 
  window.getComputedStyle (obj,null) [attr];//in order to obtain the value of the property in the browser of the Consortium}} function animate (Obj,json) {clearinterval (Obj.timer);
    Obj.timer = 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 > 0?
      Math.ceil (STEP): Math.floor (step); First determine if the attribute is transparency if (attr = = ' opacity ') {///first determine whether the browser supports opacity if (' opacity ' in Obj.style) {obj.
        Style.opacity = (current + step)/100;
        }else{obj.style.filter = ' alpha (opacity = ' + (current + Step) + ') ';
      }//re-determine whether the attribute is Z-index}else if (attr = = ' ZIndex ') {obj.style.zIndex = json[attr]; Finally, Judge}e.lse{Obj.style[attr] = current + step + ' px ';
      } if (current!= json[attr]) {flag = false;
    } if (flag) {clearinterval (Obj.timer);
}},5); }

The framework is compatible with different browsers and allows the passing of properties such as opacity and z-index, and of course, common properties such as width,height,left,right are essential. With this framework, you can achieve very good results. So now we're officially doing the demo.

The first is the production of index.html.

<div id= "box" >
  <ul>
    <li></li>
    <li></li>
    <li></li >
    <li></li>
    <li></li>
  </ul>
</div>

Index.html is very simple to make, and we will insert the picture as an Li background image in JavaScript. After that, we are adjusting 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:

Window.onload = function () {
    var box = document.getElementById (' box ');
    var aLi = Box.children[0].children;
    for (Var i=0;i<ali.length;i++) {
      ali[i].style.backgroundimage = ' url (' + ' images/' + (i + 1) + '. jpg ';
      Ali[i].onmouseover = function () {for
        (var i=0;i<ali.length;i++) {
          animate (ali[i],{width:100});
        }
        Animate (this,{width:800});
      Ali[i].onmouseout = function () {for
        (var i=0;i<ali.length;i++) {
          animate (ali[i],{width:240});
        }
    }
  }

This use of the original JS implementation of the Bellows effect of the demo is realized, of course, you can also use the packaged animate framework to achieve similar to NetEase's carousel effect.

The above original JS to achieve the bellows-type demo, and encapsulated a motion framework (example code) is small to share all the content of the whole, hope to give you a reference, but also hope that we support the cloud habitat community.