作者的話
偶然一個機會，在網上看到一篇ted公開課【讓我們教孩子編程吧】
裏面有一個實例，說是一個小男孩製作了一個大魚吃小魚的遊戲，他想爲這個遊戲做一個計分板（吃一條魚加一分），便他在網上求教，後來被網站創作者發現後，告訴了他答案：變量。通過這個學到的知識點【變量】也許小男孩永遠不會忘記。
從中可以看出，通過需求學習編程往往比爲了學編程而學習編程要記得更勞並且更有價值。這也對我之後的學習以及寫作產生的改變。
PS:以下代碼每次只寫出有更改的地方，無更改的地方不再贅述。每一部分的格式都是:效果圖——思路——代碼的順序書寫，目的是希望初學者可以根據效果圖，輔以思路試着自己寫出代碼，最後再與作者的代碼作比較，希望能通過這個方法明白，實現效果的方式是多種多樣的，不要只侷限在作者的思路中，當然最重要的是能鍛鍊自己編寫代碼的能力。
任務概述
需要達到的效果
1. 默認首頁選中樣式；
2. 設置鼠標滑過效果：顏色變化(#f60)，寬度變化,字體變化。
所涉及知識點
- 佈局：float；
- css：元素狀態切換(display)，盒模型(margin,padding)，圓角邊框(border-radius),可見寬(offsetWidth)；
3.JavaScript:匿名類，for循環，通過標籤獲得元素(getElementsByTagName), 方法自動間隔運行(setInterval/clearInterval)。
基本架構
這是一個沒有任何css修飾的html代碼
無序列表:<ul>，<li>,是與導航欄語義比較貼切的標籤，然後將<a>標籤放到<li>內部即可實現導航欄html部分。
<ul class="nav" >
<li><a href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>這是導航欄默認樣式，我們通過css進行初步修改
樣式修改
取消默認樣式
把瀏覽器默認的盒模型值，列表樣式以及鏈接樣式的默認樣式取消，並且把字體顏色改成黑色。
*{margin: 0;padding: 0;font-size: 14px;}
li{list-style: none;}
a{text-decoration: none; color: #000;}設置骨架
- 通過將
<a>設置成塊狀標籤，即可達到給<a>設置寬高的目的； - 通過
float：left使導航欄從縱向排列變成橫向排列； - 通過將
line-height屬性設置的跟height一樣，實現導航欄文字垂直居中； - 通過text-aligin將導航欄文本水平居中。
li{list-style: none;float:left;}
li a{display:block;width: 100px;
height: 30px;line-height: 30px;
text-aligin:center; }顏色以及細節修改
- 設置導航欄默認顏色，並且通過
margin屬性是導航標籤產生間隔。 - 將導航欄四個角通過
border-radius設置成圓角。 - 通過給
<a>屬性設置class=on，以及僞類選擇器a:hover將【首頁】和【鼠標滑過】的樣式顏色設置爲#f60，字體顏色設置爲白色。
li a{display:block;
width: 100px;height: 30px;
line-height: 30px;
background-color: #efefef;
margin-left:1px;}
.on,.nav li a:hover{
background-color: #f60;color: #fff;}設置導航欄的“腳”
1.通過border-bottom屬性製作導航欄的“腳”；
2. 要知道我們已經將<li>設置成了float，因此它已經脫離了文本檔，那麼其父元素的默認height值也就爲0，需要自己設定；
3.通過margin,padding屬性移動導航欄主體部分。
ul{height:50px;
border-bottom:5px solid #f60;
padding-left:20px;}
li{margin-top:20px;}鼠標劃過改變行高
1. 通過hover設置鼠標劃過後的行高
2.此時會發現導航欄向下移動了，通過將margin設置爲負值，向上移動。
.on,.nav li a:hover{
height: 40px;line-height: 40px;
margin-top: -10px;}以上是css部分，下面講JavaScript。
鼠標劃過自動伸縮
分爲兩部分來寫：自動伸和自動縮
鼠標劃過自動伸
效果：鼠標劃過導航欄自動延伸。
- 首先要獲得
<a>標籤元素，可以通過getElementsByTag； - 要給每一個
<a>標籤設置，可以通過for循環遍歷； - 鼠標劃過事件通過 onmouseover設置；
- 在方法裏通過var變量獲得當前
<a>標籤元素。 - 設置自動延伸，可以通過setInterval方法，讓方法以固定的時間爲間隔，反覆執行；
- 此時導航欄會無限延伸，通過if設置條件，設置導航欄延伸停止時機。
window.οnlοad=function(){
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].οnmοuseοver=function(){
var This=this;
clearInterval(This.time);//初始化
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=150){
clearInterval(This.time)
}
},30);
}
}
}鼠標離開自動縮
最終圖片，與文章開頭圖片相同
效果：鼠標離開導航欄自動縮到原始狀態。
- 思路同上，只是數值相反。
aA[i].οnmοuseοut=function(){
var This = this;
clearInterval(This.time);//初始化
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=100){
clearInterval(This.time);
}
},30);
}
}最終代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>導航欄v1.0</title>
<style type="text/css">
/*@group general style*/
*{margin: 0;padding: 0;font-size: 14px;}
a{color: #333;text-decoration: none;}
ul{
list-style: none;border-bottom: 5px solid #f60;height: 50px;
padding-left: 30px;
}
li{
margin-top:20px;
float: left;}
/*@group overrides*/
.nav li a{
display: block;
text-align: center;
height: 30px;
line-height:30px;
width: 120px;
background-color: #efefef;
border-radius: 5px;
}
.nav .on,.nav li a:hover{
color: #fff;
background-color: #f60;
height: 40px;
line-height: 40px;
margin-top: -10px;
}
</style>
</head>
<body>
<ul class="nav" >
<li><a class="on" href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>
<script type="text/javascript">
window.οnlοad=function(){
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].οnmοuseοver=function(){
// 設置方法停止的時機
clearInterval(this.time);
// 此處this爲當前a標籤
var This=this;
// 設置方法每30毫秒運行一次
// 其中offsetWidth:對象的可見寬度，包括本身width+padding-border
// 當offsetWidth>=120時，程序停止。
This.time=setInterval(function(){
This.style.width=This.offsetWidth+8+"px";
if(This.offsetWidth>=160){
clearInterval(This.time);
}
},30);
}
aA[i].οnmοuseοut=function(){
clearInterval(this.time);//初始清理
var This=this;
This.time=setInterval(function(){
This.style.width=This.offsetWidth-8+"px";
if(This.offsetWidth<=120){
clearInterval(This.time);
}
},30);
}
}
}
</script>
</body>
</html>
