知識點：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>

轉載于:https://blog.51cto.com/13457136/2087846

總結

以上是生活随笔為你收集整理的web前端基础案例-开发QQ空间旋转时光轴的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。