2018暑期答辯作品——Andy書屋
|
還是先來一個總結吧，在這個暑假學到的最重要的一點就是做一個作品之前一定要先有一個自己的清楚地構思，把每部分要做什麼，做成什麼樣子想好，並畫出一個草圖。因為一個作品不是一會兒就可以完成的，而你的記憶力也一定不會那麼好。前提工作做好了，後面就會做的很快，不至於每個部分磨磨蹭蹭很久還不知道做什麼合適，或許這就是一個全域性思想吧（哈哈，偷笑一下，不喜歡太正經了）。然後再去完善每個部分，當然，這裡也有很重要的一點，就是佈局一定要明瞭，包括css樣式也要分塊清除，這樣在完善的時候也會省去很多麻煩。好了，來看一下我的醜醜的書屋吧（比較正經老套的書屋）。 |
一：主題思想
雖然我比較喜歡讀書，但對做網站真沒多大的創意，主要還是參考的當當網、有路網等一些二手網站。我選擇的主題是綠色，是感覺像草原一樣，遼闊寧靜致遠，但效果好像並不是這樣，不過想法還是不錯，所以也就沒有更改。
二：要點介紹
我主要介紹5部分，分別是3D導航欄、隱藏選單、熱銷榜（onmouseover事件）、標籤頁和輪播圖、固定頂部及滾動監聽。
- 1.3D旋轉導航欄
3D導航欄看起來比較複雜，其實就只用了css動畫來實現的，然後就是需要在html中新增翻轉後的部分，我想或許可以利用這個方法做一個更加絢麗的旋轉動畫。下面就簡單看一下程式碼吧。
<ul class="nav1_mid"> <li style="padding-left: 0px;"><a href="#" class="pc action">首頁 <span class="line"><span class="front">首頁</span><span class="back">首頁</span></span> </a></li> <li><a href="#" class="pc">新書 <span class="line"><span class="front">新書</span><span class="back">新書</span></span> </a></li> <li><a href="#" class="pc">舊書 <span class="line"><span class="front">舊書</span><span class="back">舊書</span></span> </a></li> <li><a href="#" class="pc">電子書 <span class="line"><span class="front">電子書</span><span class="back">電子書</span></span> </a></li> <li><a href="sale.html" class="pc">出售 <span class="line"><span class="front">出售</span><span class="back">出售</span></span> </a></li> </ul>
這裡面的.line以及.front，.back就是翻轉後的內容，需要包含在原本的.pc裡面，實現更好的翻轉效果。關於css的簡單解釋在程式碼裡標有。
.nav1_mid{ display: block; width: 1200px; margin: 0 auto; background: #70ae73; } .nav1_mid>li{ display: inline-block; box-sizing: border-box; border-right: 1px solid #94c0be; } .nav1_mid li a{ display: block; color: #fff; overflow: visible; font-weight: 800; padding: 15px 30px; text-align: center; } /*以上設定的是關於導航欄普通的樣式，還未涉及翻轉*/ .pc{ perspective: 200px; -moz-perspective: 200px; transition: all 0.1s linear; -moz-transition: all 0.1s linear; position: relative; } /*動畫效果*/ .line{ -moz-transition:all 0.3s ease; transition:all 0.3s ease; transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform: translateZ(-25px); -moz-transform: translateZ(-25px); position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } /*這裡就開始設定翻轉的效果了，運用的就是3D動畫裡的translate*/ .front{ transform: rotateX(0deg) translateZ(25px); -moz-transform: rotateX(0deg) translateZ(25px); } .back{ transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); color: #FFE7c4; } .front, .back { display: block; width: 100%;height: 100%; position: absolute; top: 0;left: 0; background: #70ae73; padding: 15px 30px; color: #fff; box-sizing: border-box; } .pc:hover .line,.pc:focus .line{ transform: translateZ(-25px) rotateX(90deg); -moz-transform: translateZ(-25px) rotateX(90deg); } /*開始翻轉了，注意，翻轉的是.line，而不是.front和.back*/ .nav1_mid li .action .front, .nav1_mid li a:hover .front, .nav1_mid li a:hover .back{ background-color: #44a556; background-size: 5px 5px; background-position: 0 0, 30px 30px; background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480); } /*這部分設定的是.front、.back、.active的效果，利用linear-gradient設定了一個蜂巢背景*/
- 2.隱藏選單
這個也是用css來做的，他的麻煩之處在於定位問題以及一些小細節，這些做起來是很浪費時間的，但可以幫助你更好的理解定位。我附一張圖來解釋一下，程式碼比較簡單不再附屬了。
展開部分就是使用的:hover，它與左邊小方框是在一個大盒子裡的，這樣當滑鼠移上去的時候能夠實現擴充套件部分能夠出現，而對於擴充套件部分的位置，就是需要在大盒子裡加上position:relative，擴充套件部分加上position:absolute，這樣更好的控制位置的移動。我做的時候遇到比較麻煩的一點就是當擴充套件部分出現時小方框的右邊邊框是沒有的，而這個邊框又是整個“圖書分類”的邊框，對其單獨設定邊框又無法與其重合。後來就想到可以用選擇器:before來實現，但一個致命的問題又來了，每個小框框的高度都是不一樣的，你如何設定高度呢？對，是的，這時候你就要單獨的給每個方框設定高度了，然後就可以用height:inherit來實現了，至於寬度和位置那就需要自己來除錯了。
- 3.熱銷榜（onmouseover事件）
這個熱銷榜也是困惑了我好長時間，不知道是如何來控制滑鼠事件的（滑鼠移到不同部分時可以其內容會改變，而當滑鼠移走時，該部分保持改變後的內容，:hover顯然是實現不了的），然而當你理解了onmouseover和onmouseout事件之後，就會發現是如此之簡單。
var day1=document.getElementById("day1"),
/*day1為整個大盒子的id*/
oUl=day1.getElementsByTagName("ul")[0],
/*每一個圖書的是用ul，li來排列的*/
oLis=oUl.getElementsByTagName("li"),
oDivs=day1.getElementsByTagName("div"),
/*div是帶有圖片的部分*/
oSpn=day1.getElementsByTagName("p");
/*p是沒有圖片的部分*/
for(var i=0,len=oLis.length;i<len;i++){
oLis[i].index=i;
oLis[i].onmouseover=function() {
for(var n=0;n<len;n++){
oSpn[n].className="";
oDivs[n].className="hide";
}
this.className="on";
oDivs[this.index].className="long";
/*long是帶有display:block的*/
oSpn[this.index].className="hide"
/*hide是帶有display:none的*/;
}
};- 4.標籤頁/輪播圖
標籤頁其實就是利用bootstrap來做的，bootstrap裡定義的一些標籤屬性還是很好用的，不需要新增什麼樣式就可以簡單地實現那些看起來很複雜的效果，就比如說標籤頁和輪播圖（js的輪播圖上一篇有介紹這裡就不再細說了）。這裡我附上一張圖片說明一下，因為分頁的設定根本就不需要新增css和js的。
- 5.固定頂部及滾動監聽
這個也是讓我想了很久甚至想要放棄的，因為若是從開始就在頂部固定還好，可是這個需要當頁面滑到他的時候，他才固定在頂部，這就讓我有點不知道怎麼實現，後來查了很多，發現用$(window).scrollTop()是可以做的，就拿來用了。程式碼還是很容易理解的。所以我就只加圖了哦。
三：暑期感想
暑假的時候可能太放鬆了，在家裡沒有做網頁，也沒有複習，很多東西都忘記了，而來了之後也是比較放鬆的，以至於做的很慢，加上沒有什麼好的想法就做的很粗。我覺得吧，要培養自己的興趣，而不是把這個看成一個任務，有時候自己想到一個好的想法的時候就可以去做，隨意做，可以加強自己的記憶力，也可以更好地掌握。可能會很難吧，但我想要運用到生活中，至少做一個自己想要做的內容，嘿嘿，還可以紀念一下呢！
再有就是時間要有一個規劃，雖然可以不安排的那麼緊張，但一定在一定的時間做好一定的事情，不然會一拖再拖，然後，一定要把自己要做的事情列出來，我再也不會相信你的七秒鐘記憶了！