亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Monthai: jQuery下劃線跟隨導(dǎo)航實(shí)踐總結(jié)

??? 2018-11-20 10:13:33 196
????：函數(shù)思路（1）鼠標(biāo)上移至li上獲取name值，用于計(jì)算白條移動(dòng)距離；（2）將計(jì)算得到的距離賦予animate({left:$x+'px'},300)，；（3）鼠標(biāo)移開時(shí)白條恢復(fù)至起始位置。$(function(){     $('li').hover(       &

函數(shù)思路

（1）鼠標(biāo)上移至li上獲取name值，用于計(jì)算白條移動(dòng)距離；

（2）將計(jì)算得到的距離賦予animate({left:$x+'px'},300)，；

（3）鼠標(biāo)移開時(shí)白條恢復(fù)至起始位置。

$(function(){
    $('li').hover(
        function(){
           $x=parseInt($(this).attr('name'))*120
      $('.block').stop().animate({left:$x+'px'},300)
     },  //為什么是逗號(hào)？？？
    function(){
      $('.block').stop().animate({left:'0px'},300)
    }
    )
 })

實(shí)現(xiàn)要點(diǎn)

（1）白條的位置是相對(duì)menu定位；

（2）jQuery函數(shù)之間用逗號(hào)【，】隔開，不是分號(hào)。錯(cuò)誤時(shí)提示：missing ) after argument list。


jq函數(shù)分隔符.png

（3）如果li有邊框，menu的整體寬度，白條移動(dòng)的距離都會(huì)收到影響；

jqborder.png

完整代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下劃線跟隨導(dǎo)航</title>
        <script src="js/jquery-3.3.1.js"></script>
        <style type="text/css">
            *{margin: 0px 0px; padding: 0px 0px;}
            body{background: #F5F5F5;}
            .menu{width: 720px; margin: 20px auto; line-height: 30px; height: 30px; box-shadow: 1px 3px 5px #0055CC;}
            .block{height: 3px; width: 120px; background: white; position: relative; top: 30px;}
            ul{list-style: none; position: relative;}
            li{width: 100px; background-color: #B3D4FC; float: left; 
                border-right: 0px solid white; padding: 0px 10px; text-align: center;}
        </style>
        <script type="text/javascript">
            $(function(){
                $('li').hover(
                    function(){
                        $x=parseInt($(this).attr('name'))*120
                        $('.block').stop().animate({left:$x+'px'},300)
                    },  //為什么是逗號(hào)？？？
                    function(){
                        $('.block').stop().animate({left:'0px'},300)
                    }
                )
            })
        </script>
    </head>
    <body>
        <div class="menu">
            <ul>
                <li name="0">首頁(yè)</li>
                <li name="1">HTML</li>
                <li name="2">CSS</li>
                <li name="3">JavaScript</li>
                <li name="4">vue.js</li>
                <li name="5">webpack</li>
            </ul>
            <div class="block"></div>
        </div>
    </body>
</html>

END


?? ???：滅絕師太?? ??：2018-11-20 10:17:50
???? ??：嗯，你的作業(yè)看著賞心悅目，自己也理解的很好！繼續(xù)加油！

??? ??

?? ??