web前端小白案例，爱新鲜抽屉式特效

知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，动态布局，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。

对前端感兴趣或者正在学习web前端的小伙伴可以来前端群：189394454，每天都会有干货分享。
html代码：

<div id="box"&gt;

        <div class="item">
            <img src="images/1.jpg" alt="美女" width="956" height="400"/><!--图片四要素-->
            <div class="line">爱新鲜</div>
        </div>
        <div class="item">
            <img src="images/2.jpg" alt="美女" width="956" height="400"/>
            <div class="line">一衣多穿</div>
        </div>
        <div class="item">
            <img src="images/3.jpg" alt="美女" width="956" height="400"/>
            <div class="line">评测擂台</div>
        </div>
        <div class="item">
            <img src="images/4.jpg" alt="美女" width="956" height="400"/>
            <div class="line">达人心经</div>
        </div>
        <div class="item">
            <img src="images/5.jpg" alt="美女" width="956" height="400"/>
            <div class="line">大咖卖场</div>
        </div>
    </div>

**css代码：**

    <style type="text/css">
    /*CSS层叠样式列表*/
    *{margin:0px;padding:0px;}/*通配符 1.对所有元素增加其样式  清楚所有默认内外边距 2.解决不同浏览器的兼容问题*/
    body{background:#000;/*背景颜色*/}
    #box{
        width:1120px;/*宽度 px像素*/
        height:400px;/*高度*/
        background:#fff;
        margin:120px auto 0px;/*上 左右(auto自动相等) 下*/
        position:relative;/*相对定位*/
        overflow:hidden;/*超出部分隐藏*/
    }
    #box .item{
        position:absolute;/*绝对定位
          一般找父级定位 是不区分绝对与相对的  意思就是说不管父级是绝对还是相对，都是可以当做参照物的
        */
        top:0px;
        left:0px;
    }
    #box .item .line{
        width:20px;
        height:260px;
        background:#000;
        position:absolute;
        left:0px;
        top:0px;
        font-size:18px;/*文字大小*/
        padding:140px 10px 0px;
        color:#fff;/*文字颜色*/
        font-family:"微软雅黑";/*文字样式*/
        cursor:pointer;/*鼠标样式*/
        opacity:0.8;/*CSS3 盒子透明  0-1*/
        border-left:1px solid #fff;/*左边框 粗细 样式  颜色*/
    }
    </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>

原文地址：http://blog.51cto.com/13457136/2087189