js and jquery achieve accordion effect

Recently, I reviewed the knowledge of jQuery, since jQuery is a library of javascript. What jQuery can do, so can javascript. Therefore, the picture accordion effect is realized by these two methods.

According to the convention, or on the code, because there are my comments in the code is equivalent to an explanation!

Look at the code of javascript first:

div Layout: Note oh, we use js code to generate the pictures inside

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

css Style:

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 ul{
 list-style: none;
 }
 #box{
 width: 1150px;
 height: 400px;
 margin: 50px auto;
 border: 1px solid red;
 overflow: hidden;
 }
 #box ul{
 width: 1300px;
 }
 #box ul li{
 width: 240px;
 height: 400px;
 float: left;

 }
 </style>

It's time to write js code. Here encapsulated a complete sports framework (I personally think ha, you can continue to improve, but you have to tell me, I also learn 1!)

/*
 *  Steps to implement animation :
 1. How to get the current style   Encapsulation 1 Functions  getStyle()
 2. Calculation of step size   Use ( Target location  -  Current style ) / 10
 3.  Principle of slow motion animation :  The style of the box itself  +  Step length ( Changing )
 */
/*
 * css Set transparency, 1 As in ie Is used in filter:alpha(opacity=0);
 And in firefox In, 1 Is to use it directly opacity:0
*/
//  Motion frame with multiple attributes   And add callback functions 
function animate(obj,json,fn){ //  Objectives obj json  Attribute: Attribute value  fn Callback function 
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var flag = true;//  Used to judge whether to stop the timer  
 //  Traversal json
 for (var attr in json) { //attr  Attribute  json[attr] Value 
 var curStyle = 0;
 if (attr == "opacity") {
 curStyle = parseInt(getStyle(obj,attr)*100);
 } else{
 curStyle = parseInt(getStyle(obj,attr));//  Get a numerical value 
 }
 //  Get step size   The target location is json[attr]
 var step = (json[attr]-curStyle) / 10;
 step = step > 0 ? Math.ceil(step) :Math.floor(step);

 //  Transparency of judgment 
 if (attr == "opacity") { //  Judge whether the user has input or not opacity
 if ("opacity" in obj.style) { 
  obj.style.opacity = (curStyle + step) / 100;
 } else{
  obj.style.filter = "alpha(opacity="+(curStyle +step)+")";
 }

 } else if(attr == "zIndex"){
 obj.style.zIndex = json[attr];
 } else{
 obj.style[attr] = curStyle +step +"px";
 }
 //  Determine whether they have all reached the target position   As long as one of them 1 Unsatisfied conditions   You shouldn't stop the timer 
 if (curStyle != json[attr]) {
 flag = false;
 }
 }
 //  Judge timer condition   Is it time to stop 
 if (flag) {
 clearInterval(obj.timer)
 //  When the timer stops, the animation ends . If there is a callback function, execute the callback function 
 if(fn){
 fn();
 }

 }
 },30);
}

//  Encapsulated function   Get attributes 
function getStyle(obj,attr) { //  Whose   That attribute 
 if(obj.currentStyle) // ie  Etc 
 {
 return obj.currentStyle[attr]; //  Returns a property passed over 
 }
 else
 {
 return window.getComputedStyle(obj,null)[attr]; // w3c  Browser 
 }
}

Then we introduced the framework we wrote in js

<script src="animate.js"></script>

Next, write the js code

<script>
 window.onload = function(){
 var box = document.getElementById("box");
 var lis = box.children[0].children;
 for (var i = 0; i < lis.length;i++) {
  lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
  lis[i].onmouseover = function(){
  for (var j = 0; j < lis.length;j++) {
  animate(lis[j],{width:100});
  }
  animate(this,{width:800});
  }
  lis[i].onmouseout = function(){
  for (var k = 0; k < lis.length;k++) {
  animate(lis[k],{width:240});
  }
  }
 }
 }
</script>

Ok, that's it. You can see the concrete effect by yourself. Complete download address for js version of accordion effect

After writing js, I found a lot of code. Look at jquery code. Oh, buy Ga. Remember that 1 must introduce jQuery package first, and then write code!

<script src="jquery-1.11.1.min.js"></script>
 <script>
 $(function(){
 $("#box li").each(function(index,ele){
  $(ele).css("background","url(images/"+(index+1)+".jpg)");
 }).mouseenter(function(){
  $(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);
 }).mouseleave(function(){
  $("#box li").stop().animate({width:240},500);
 });
 });

 </script>

It's much simpler.
Come on, our jQuery version accordion effect download address