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

3.4jQuery事件切換

original 2019-01-11 13:28:48 267
abstrait:語(yǔ)法:hover(over,out)over:鼠標(biāo)移上元素要出發(fā)的一個(gè)函數(shù),out:鼠標(biāo)移出元素要觸發(fā)的一個(gè)函數(shù)!例:$('選擇器').hover(function(){移上要做的事件},function(){移出要做的事件})toggle() //如果元素可見的,就切換為隱藏,否則相反!總結(jié):hove內(nèi)部必須寫兩個(gè)函數(shù),函數(shù)之間用逗號(hào)隔開。toggle()是判斷元素是否可見如果可

語(yǔ)法:

hover(over,out)

over:鼠標(biāo)移上元素要出發(fā)的一個(gè)函數(shù),out:鼠標(biāo)移出元素要觸發(fā)的一個(gè)函數(shù)!

例:$('選擇器').hover(

function(){

移上要做的事件

},

function(){

移出要做的事件

}

)

toggle() //如果元素可見的,就切換為隱藏,否則相反!

總結(jié):hove內(nèi)部必須寫兩個(gè)函數(shù),函數(shù)之間用逗號(hào)隔開。toggle()是判斷元素是否可見如果可見就執(zhí)行隱藏,如果不可見就執(zhí)行顯示效果!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box{
            width: 218px;height: 170px;
            position: relative;top: 60px;left: 60px;
            box-shadow: 1px 3px 7px #ccc;

        }
        .box img{
            width: 218px;height: 130px;
            border-radius: 10px;
        }
        .box span{
            color: #ccc;
            font-size: 10px;
            padding: 5px 20px;
            position: absolute;z-index: 10;/*層級(jí)z-index必須在定位后面*/
        }
        .box p{
            height: 80px;
            padding: 0 20px;
            background: #fff;
            font-size: 14px;
            text-indent: 2em;
            position: absolute;top: 65px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt="">
        <p>javaScript極速入門_玉女心經(jīng)系列</p>
        <span>123人在看</span>
    </div>
    <script src="jQuery/jQuery-3.3.1.js"></script>
    <script>
        $(function(){
            $('.box').hover(
                function(){
                    $('p').stop().animate({'top':'40px'})
                    // stop()是停止當(dāng)前動(dòng)畫
                    // animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫。
                },
                function(){
                    $('p').stop().animate({'top':'65px'})
            })
        })
    </script>

</body>
</html>


Professeur correcteur:滅絕師太Temps de correction:2019-01-11 13:46:18
Résumé du professeur:很棒,有好好聽課哦!jq的知識(shí)點(diǎn)主要就是需要運(yùn)用,學(xué)以致用很重要,還是要多多練習(xí)噠

Notes de version

Entrées populaires