web前端基礎案例-開發QQ空間旋轉時光軸
阿新 • • 發佈：2018-03-17
前端 案例 源碼 編程 javascript 
知識點：html標簽，css樣式屬性，代碼優化，行業規範，布局思路，javascript基礎，jquery方法，邏輯思維。
html代碼：
知識點：html標簽，css樣式屬性，代碼優化，行業規範，布局思路，javascript基礎，jquery方法，邏輯思維。
html代碼：
<div class="con"> <div class="top"> <img src="images/my.jpg" height="667" width="500" alt="關鍵詞" /> <p>經典課程集</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;/*內邊距*/} body{ background:url(‘images/bg.jpg‘) fixed; /*background-attachment:;設置背景圖是否固定或者隨著頁面滾動*/ } .con{/*以 . 開頭 class命名 類選擇器*/ width:900px; margin:0 auto;/*上下外邊距0 左右自適應居中*/ } .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函數 $(‘元素‘) $(‘.content:lt(3)‘).show();//找到序列號小於3的元素 顯示 //滾動事件 $(window).scroll(function(){ var _top = $(window).scrollTop();//獲取滾動條高度 console.log( _top ); $(‘.content‘).each(function(){//遍歷 var _index = $(this).index()+1;//當前序列號 var _height = $(this).offset().top;//獲取到當前content到瀏覽器窗口頂部距離 if( _top < _height ){//優先原則 $(‘.content:lt(‘+_index+‘)‘).show(); $(‘.content:gt(‘+_index+‘)‘).hide(); return false;//t跳出遍歷 } }); }); </script>
web前端基礎案例-開發QQ空間旋轉時光軸