Web front-end small white case, love fresh drawer effect

Knowledge Points: Enterprise layout skills, how to efficiently write CSS style, common selectors, basic tags, dynamic layout, box model, jquery class library calls, JS special effects, JS programming thinking.

A small partner who is interested in the front end or is learning the front end of the Web can come to the front-end group: 189394454, daily dry sharing.
HTML code:

<div id="box"&gt;

  <div class= "Item" > &L t;!            --Picture four elements--<div class= "line" > Love fresh </div> </div> <div class= "Item" >  <div class=" line "> one coat more wear </div>        ;            </div> <div class= "Item" >   <div class= "line" > Evaluation ring </div> </div> <div class= "Item" >  <div class=" line "> Reach Hearts </div> <            /div> <div class= "Item" >  <div class= "line" > Grand Cafe </div> </div> </div>  

  **CSS Code: * *  
 

  <style type= "text/css" >/*css cascading Style list */*{margin:0px;padding:0px;}         /* wildcard character 1. Add its style to all elements clear all default internal and external margins 2. Resolve compatibility issues with different browsers */body{background: #000;/* Background color */} #box {width:1120px;/* width px pixels */        height:400px;/* Height */background: #fff; margin:120px Auto 0px;/* on/off (auto equals) */position:relative;/* relative positioning */overflow:hidden;/* out of partially hidden */} #bo X. item{position:absolute;/* Absolute Positioning is usually to find the parent position is not to distinguish between absolute and relative meaning that regardless of whether the parent is absolute or relative, can be used as a reference to the * * top:0px        ;    left:0px;        } #box. Item. line{width:20px;        height:260px;        Background: #000;        Position:absolute;        left:0px;        top:0px;        font-size:18px;/* Text Size */padding:140px 10px 0px; Color: #fff;/* Text color */font-family: "Microsoft Jas Black";/* Text style */cursor:pointer;/* mouse style */opacity:0.8;/*css3 box transparent 0-1* /border-left:1px solid #fff;/* Left Border weight style color */} </style>  

**javascript代码：**

    <script type="text/javascript" src="js/jquery.js"></script>    <script type="text/javascript">    var arr = [];//数组    var i=0;    //each是自动循环的意思 JQ方法  [0,41,41*2,41*3,41*4]    $("#box .item").each(function(i){//遍历        $(this).css("left",i*41+"px");        arr[i] = i*41;//保存每一个item的left值    });    $("#box .item .line").click(function(){        var _index = $(this).parent().index();//获取序列号        $("#box .item").each(function(i){            if (i<=_index)            {                //符合条件部分                $(this).animate({left:arr[i]+"px"},500);            }else{                //不符合条件部分                $(this).animate({left:arr[i]+915+"px"},500);            }        });    });    </script>

Web front-end small white case, love fresh drawer effect