作者的話
偶然一個機會，在網(wǎng)上看到一篇ted公開課【讓我們教孩子編程吧】
里面有一個實例，說是一個小男孩制作了一個大魚吃小魚的游戲，他想為這個游戲做一個計分板（吃一條魚加一分），便他在網(wǎng)上求教，后來被網(wǎng)站創(chuàng)作者發(fā)現(xiàn)后，告訴了他答案：變量。通過這個學到的知識點【變量】也許小男孩永遠不會忘記。
從中可以看出，通過需求學習編程往往比為了學編程而學習編程要記得更勞并且更有價值。這也對我之后的學習以及寫作產(chǎn)生的改變。
PS:以下代碼每次只寫出有更改的地方，無更改的地方不再贅述。每一部分的格式都是:效果圖——思路——代碼的順序書寫，目的是希望初學者可以根據(jù)效果圖，輔以思路試著自己寫出代碼，最后再與作者的代碼作比較，希望能通過這個方法明白，實現(xiàn)效果的方式是多種多樣的，不要只局限在作者的思路中，當然最重要的是能鍛煉自己編寫代碼的能力。
任務概述
需要達到的效果
task goal_1
task goal_2
- 默認首頁選中樣式；
- 設置鼠標滑過效果：顏色變化(#f60)，寬度變化,字體變化。
所涉及知識點
- 布局：float；
- css：元素狀態(tài)切換(display)，盒模型(margin,padding)，圓角邊框(border-radius),可見寬(offsetWidth)；
3.JavaScript:匿名類，for循環(huán)，通過標簽獲得元素(getElementsByTagName), 方法自動間隔運行(setInterval/clearInterval)。
基本架構
這是一個沒有任何css修飾的html代碼
3
無序列表:<ul>，<li>,是與導航欄語義比較貼切的標簽，然后將<a>標簽放到<li>內(nèi)部即可實現(xiàn)導航欄html部分。
<ul class="nav" >
<li><a href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產(chǎn)品展示</a></li>
<li><a href="#">售后服務</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
這是導航欄默認樣式，我們通過css進行初步修改
樣式修改
取消默認樣式
4
把瀏覽器默認的盒模型值，列表樣式以及鏈接樣式的默認樣式取消，并且把字體顏色改成黑色。
*{margin: 0;padding: 0;
font-size: 14px;}
li{list-style: none;}
a{text-decoration: none;
color: #000;}
設置骨架
5
- 通過將
<a>設置成塊狀標簽，即可達到給<a>設置寬高的目的； - 通過
float：left使導航欄從縱向排列變成橫向排列； - 通過將
line-height屬性設置的跟height一樣，實現(xiàn)導航欄文字垂直居中； - 通過text-aligin將導航欄文本水平居中。
li{list-style: none;float:left;}
li a{display:block;width: 100px;
height: 30px;line-height: 30px;
text-aligin:center; }
顏色以及細節(jié)修改
6
- 設置導航欄默認顏色，并且通過
margin屬性是導航標簽產(chǎn)生間隔。 - 將導航欄四個角通過
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;}
設置導航欄的“腳”
7
1.通過border-bottom屬性制作導航欄的“腳”；
- 要知道我們已經(jīng)將
<li>設置成了float，因此它已經(jīng)脫離了文本檔，那么其父元素的默認height值也就為0，需要自己設定；
3.通過margin,padding屬性移動導航欄主體部分。
ul{height:50px;
border-bottom:5px solid #f60;
padding-left:20px;}
li{margin-top:20px;}
鼠標劃過改變行高
8
- 通過hover設置鼠標劃過后的行高
2.此時會發(fā)現(xiàn)導航欄向下移動了，通過將margin設置為負值，向上移動。
.on,.nav li a:hover{
height: 40px;
line-height: 40px;
margin-top: -10px;}
以上是css部分，下面講JavaScript。
鼠標劃過自動伸縮
分為兩部分來寫：自動伸和自動縮
鼠標劃過自動伸
9
效果：鼠標劃過導航欄自動延伸。
- 首先要獲得
<a>標簽元素，可以通過getElementsByTag； - 要給每一個
<a>標簽設置，可以通過for循環(huán)遍歷； - 鼠標劃過事件通過 onmouseover設置；
- 在方法里通過var變量獲得當前
<a>標簽元素。 - 設置自動延伸，可以通過setInterval方法，讓方法以固定的時間為間隔，反復執(zhí)行；
- 此時導航欄會無限延伸，通過if設置條件，設置導航欄延伸停止時機。
window.onload=function(){
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=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);
}
}
}
鼠標離開自動縮
最終圖片，與文章開頭圖片相同
效果：鼠標離開導航欄自動縮到原始狀態(tài)。
- 思路同上，只是數(shù)值相反。
aA[i].onmouseout=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="#">產(chǎn)品展示</a></li>
<li><a href="#">售后服務</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
<script type="text/javascript">
window.onload=function(){
var aA=document.getElementsByTagName("a");
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=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].onmouseout=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>
注：此項目靈感來自慕課網(wǎng)
