作者的話

偶然一個(gè)機(jī)會(huì)，在網(wǎng)上看到一篇ted公開(kāi)課【讓我們教孩子編程吧】
里面有一個(gè)實(shí)例，說(shuō)是一個(gè)小男孩制作了一個(gè)大魚(yú)吃小魚(yú)的游戲，他想為這個(gè)游戲做一個(gè)計(jì)分板（吃一條魚(yú)加一分），便他在網(wǎng)上求教，后來(lái)被網(wǎng)站創(chuàng)作者發(fā)現(xiàn)后，告訴了他答案：變量。通過(guò)這個(gè)學(xué)到的知識(shí)點(diǎn)【變量】也許小男孩永遠(yuǎn)不會(huì)忘記。

從中可以看出，通過(guò)需求學(xué)習(xí)編程往往比為了學(xué)編程而學(xué)習(xí)編程要記得更勞并且更有價(jià)值。這也對(duì)我之后的學(xué)習(xí)以及寫(xiě)作產(chǎn)生的改變。

PS:以下代碼每次只寫(xiě)出有更改的地方，無(wú)更改的地方不再贅述。每一部分的格式都是:效果圖——思路——代碼的順序書(shū)寫(xiě)，目的是希望初學(xué)者可以根據(jù)效果圖，輔以思路試著自己寫(xiě)出代碼，最后再與作者的代碼作比較，希望能通過(guò)這個(gè)方法明白，實(shí)現(xiàn)效果的方式是多種多樣的，不要只局限在作者的思路中，當(dāng)然最重要的是能鍛煉自己編寫(xiě)代碼的能力。

任務(wù)概述

需要達(dá)到的效果

task goal_1

task goal_2

默認(rèn)首頁(yè)選中樣式；
設(shè)置鼠標(biāo)滑過(guò)效果：顏色變化(#f60)，寬度變化,字體變化。

所涉及知識(shí)點(diǎn)

布局：float；
css：元素狀態(tài)切換(display)，盒模型(margin,padding)，圓角邊框(border-radius),可見(jiàn)寬(offsetWidth)；
3.JavaScript:匿名類(lèi)，for循環(huán)，通過(guò)標(biāo)簽獲得元素(getElementsByTagName), 方法自動(dòng)間隔運(yùn)行(setInterval/clearInterval)。

基本架構(gòu)

這是一個(gè)沒(méi)有任何css修飾的html代碼

無(wú)序列表:<ul>，<li>,是與導(dǎo)航欄語(yǔ)義比較貼切的標(biāo)簽，然后將<a>標(biāo)簽放到<li>內(nèi)部即可實(shí)現(xiàn)導(dǎo)航欄html部分。

<ul class="nav" >
        <li><a href="#">首    頁(yè)</a></li>
        <li><a href="#">新聞快訊</a></li>
        <li><a href="#">產(chǎn)品展示</a></li>
        <li><a href="#">售后服務(wù)</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
    </ul>

這是導(dǎo)航欄默認(rèn)樣式，我們通過(guò)css進(jìn)行初步修改

樣式修改

取消默認(rèn)樣式

把瀏覽器默認(rèn)的盒模型值，列表樣式以及鏈接樣式的默認(rèn)樣式取消，并且把字體顏色改成黑色。

    *{margin: 0;padding: 0;
          font-size: 14px;}
    li{list-style: none;}
    a{text-decoration: none;
           color: #000;}

設(shè)置骨架

通過(guò)將<a>設(shè)置成塊狀標(biāo)簽，即可達(dá)到給<a>設(shè)置寬高的目的；
通過(guò)float：left使導(dǎo)航欄從縱向排列變成橫向排列；
通過(guò)將line-height屬性設(shè)置的跟height一樣，實(shí)現(xiàn)導(dǎo)航欄文字垂直居中；
通過(guò)text-aligin將導(dǎo)航欄文本水平居中。

li{list-style: none;float:left;}
li a{display:block;width: 100px;
     height: 30px;line-height: 30px;
     text-aligin:center;    }

顏色以及細(xì)節(jié)修改

設(shè)置導(dǎo)航欄默認(rèn)顏色，并且通過(guò)margin屬性是導(dǎo)航標(biāo)簽產(chǎn)生間隔。
將導(dǎo)航欄四個(gè)角通過(guò)border-radius設(shè)置成圓角。
通過(guò)給<a>屬性設(shè)置class=on，以及偽類(lèi)選擇器a:hover將【首頁(yè)】和【鼠標(biāo)滑過(guò)】的樣式顏色設(shè)置為#f60，字體顏色設(shè)置為白色。

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;}

設(shè)置導(dǎo)航欄的“腳”

1.通過(guò)border-bottom屬性制作導(dǎo)航欄的“腳”；

要知道我們已經(jīng)將<li>設(shè)置成了float，因此它已經(jīng)脫離了文本檔，那么其父元素的默認(rèn)height值也就為0，需要自己設(shè)定；
3.通過(guò)margin,padding屬性移動(dòng)導(dǎo)航欄主體部分。

ul{height:50px;
    border-bottom:5px solid #f60;
    padding-left:20px;}
li{margin-top:20px;}

鼠標(biāo)劃過(guò)改變行高

通過(guò)hover設(shè)置鼠標(biāo)劃過(guò)后的行高
2.此時(shí)會(huì)發(fā)現(xiàn)導(dǎo)航欄向下移動(dòng)了，通過(guò)將margin設(shè)置為負(fù)值，向上移動(dòng)。

.on,.nav li a:hover{
   height: 40px;
   line-height: 40px;
   margin-top: -10px;}

以上是css部分，下面講JavaScript。

鼠標(biāo)劃過(guò)自動(dòng)伸縮

分為兩部分來(lái)寫(xiě)：自動(dòng)伸和自動(dòng)縮

鼠標(biāo)劃過(guò)自動(dòng)伸

效果：鼠標(biāo)劃過(guò)導(dǎo)航欄自動(dòng)延伸。

首先要獲得<a>標(biāo)簽元素，可以通過(guò)getElementsByTag；
要給每一個(gè)<a>標(biāo)簽設(shè)置，可以通過(guò)for循環(huán)遍歷；
鼠標(biāo)劃過(guò)事件通過(guò) onmouseover設(shè)置；
在方法里通過(guò)var變量獲得當(dāng)前<a>標(biāo)簽元素。
設(shè)置自動(dòng)延伸，可以通過(guò)setInterval方法，讓方法以固定的時(shí)間為間隔，反復(fù)執(zhí)行；
此時(shí)導(dǎo)航欄會(huì)無(wú)限延伸，通過(guò)if設(shè)置條件，設(shè)置導(dǎo)航欄延伸停止時(shí)機(jī)。

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);
            }
        }
    }

鼠標(biāo)離開(kāi)自動(dòng)縮

最終圖片，與文章開(kāi)頭圖片相同
效果：鼠標(biāo)離開(kāi)導(dǎo)航欄自動(dòng)縮到原始狀態(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>導(dǎo)航欄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="#">首    頁(yè)</a></li>
        <li><a href="#">新聞快訊</a></li>
        <li><a href="#">產(chǎn)品展示</a></li>
        <li><a href="#">售后服務(wù)</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(){
                // 設(shè)置方法停止的時(shí)機(jī)
                clearInterval(this.time);
                // 此處this為當(dāng)前a標(biāo)簽
                var This=this;
                // 設(shè)置方法每30毫秒運(yùn)行一次
                // 其中offsetWidth:對(duì)象的可見(jiàn)寬度，包括本身width+padding-border
                // 當(dāng)offsetWidth>=120時(shí)，程序停止。
                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>

注：此項(xiàng)目靈感來(lái)自慕課網(wǎng)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

用css+js實(shí)現(xiàn)自動(dòng)伸縮導(dǎo)航欄

用css+js實(shí)現(xiàn)自動(dòng)伸縮導(dǎo)航欄

作者的話

任務(wù)概述

需要達(dá)到的效果

所涉及知識(shí)點(diǎn)

基本架構(gòu)

樣式修改

取消默認(rèn)樣式

設(shè)置骨架

顏色以及細(xì)節(jié)修改

設(shè)置導(dǎo)航欄的“腳”

鼠標(biāo)劃過(guò)改變行高

鼠標(biāo)劃過(guò)自動(dòng)伸縮

鼠標(biāo)劃過(guò)自動(dòng)伸

鼠標(biāo)離開(kāi)自動(dòng)縮

最終代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

用css+js實(shí)現(xiàn)自動(dòng)伸縮導(dǎo)航欄

作者的話

任務(wù)概述

需要達(dá)到的效果

所涉及知識(shí)點(diǎn)

基本架構(gòu)

樣式修改

取消默認(rèn)樣式

設(shè)置骨架

顏色以及細(xì)節(jié)修改

設(shè)置導(dǎo)航欄的“腳”

鼠標(biāo)劃過(guò)改變行高

鼠標(biāo)劃過(guò)自動(dòng)伸縮

鼠標(biāo)劃過(guò)自動(dòng)伸

鼠標(biāo)離開(kāi)自動(dòng)縮

最終代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av