web前端基礎(chǔ)案例-開發(fā)QQ空間旋轉(zhuǎn)時光軸

知識點：html標(biāo)簽，css樣式屬性，代碼優(yōu)化，行業(yè)規(guī)范，布局思路，javascript基礎(chǔ)，jquery方法，邏輯思維。
html代碼：

    <div class="con">
        <div class="top">
            <img src="images/my.jpg" height="667" width="500" alt="關(guān)鍵詞" />
            <p>經(jīng)典課程集</p>
        </div>
        <div class="pic-list">
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
            <div class="content">
                <div class="pic"></div>
                <div class="bq">
                    <span>2016/10/15</span>
                    <img src="images/r.png" />
                    <i></i>
                </div>
            </div>
        </div>
    </div>

css代碼：

        <style>
        /*瀏覽器兼容問題*/
        *{margin:0;/*外邊距*/padding:0;/*內(nèi)邊距*/}
        body{
            background:url('images/bg.jpg') fixed;
            /*background-attachment:;設(shè)置背景圖是否固定或者隨著頁面滾動*/
        }
        .con{/*以 . 開頭 class命名 類選擇器*/
            width:900px;
            margin:0 auto;/*上下外邊距0 左右自適應(yīng)居中*/
        }
        .con .top{
            background:#fff;
            width:130px;
            height:170px;
            text-align:center;/*文本居中對齊*/
            font-size:14px;
            line-height:20px;
            margin-left:150px;
            padding-top:15px;
        }
        .con .top img{
            width:100px;
            height:auto;
            margin:0 auto;
        }
        .con .pic-list{
            width:600px;
            border-left:3px solid #00ccff;/*邊框線*/
            margin-left:215px;
            padding-top:30px;
        }
        .con .pic-list .content{
            width:600px;
            height:400px;
            margin-bottom:30px;
            position:relative;/*相對定位 參照物*/
            -webkit-animation:sc 2s;/*定義動畫*/
            display:none;
        }
        .con .pic-list .content .pic{
            width:590px;
            height:400px;
            margin-left:10px;
            background:rgba(0,0,0,0.5);
            border-radius:10px;/*小圓角*/
            box-shadow:0px 0px 4px 4px #737373;/*水平方向 垂直方向 虛化度 范圍  顏色*/
        }
        .con .pic-list .content .bq{
            width:120px;
            height:30px;
            position:absolute;/*絕對定位*/
            top:100px;
            left:-116px;
        }
        .con .pic-list .content .bq span{
            display:block;
            background:#000;
            color:#fff;
            width:90px;
            height:30px;
            text-align:center;
            line-height:30px;
            float:left;
        }
        .con .pic-list .content .bq img{
            float:left;
            margin-top:7px;
        }
        .con .pic-list .content .bq i{
            float:right;
            width:6px;
            height:6px;
            background:#00cc33;
            border:2px solid #fff;
            border-radius:50%;
            margin-top:10px;
        }
        /*css3 動畫*/
        @-webkit-keyframes sc{
            from{-webkit-transform:rotate(220deg) scale(0.2)}
            to{-webkit-transform:rotate(0deg) scale(1)}
        }
        </style>

javascript代碼：

    <script src="js/jquery.js"></script>
    <script>
    //jq里面如何獲取對象  $// jq函數(shù)  $('元素')
    $('.content:lt(3)').show();//找到序列號小于3的元素 顯示
    //滾動事件
    $(window).scroll(function(){
        var _top = $(window).scrollTop();//獲取滾動條高度
        console.log( _top );
        $('.content').each(function(){//遍歷
            var _index = $(this).index()+1;//當(dāng)前序列號
            var _height = $(this).offset().top;//獲取到當(dāng)前content到瀏覽器窗口頂部距離
            if( _top < _height ){//優(yōu)先原則
                $('.content:lt('+_index+')').show();
                $('.content:gt('+_index+')').hide();
                return false;//t跳出遍歷
            }
        });
    });
    </script>