前端小白案例-愛新鮮抽屜式特效制作

知識點：企業布局技巧，如何高效的編寫CSS樣式，常用選擇器，基本標簽，動態布局，盒子模型，jquery類庫調用，JS特效編寫，JS編程思維等。

html代碼：

        <div id="box">

            <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>