《第41天：JQurey - 關燈效果》

時間 2019-12-05

標籤 41天 jqurey 關燈效果简体版

原文原文鏈接

源碼下載地址：
連接：https://pan.baidu.com/s/1OXkv...
提取碼：0m80
若是有贊就很幸福了.javascript

今天要和大家分享的是我看了JQuery庫的一款關燈效果，而後自已去實現它.
主要是鼠標移入移出它的狀態發生改變
開始講解前，爲你們作一些知識儲備，在接下來的實操中會用到.css

1.mouseover( function(){} )方法
鼠標移入，會實現函數裏的操做html

2.mouseleave(function(){})方法
鼠標移出，會實現函數裏的操做java

3.parent()方法
獲取到父元素jquery

4.animate()方法
添加動畫函數

5.children()方法
獲取到子元素學習

6.siblings（）方法
獲取到兄弟元素動畫

7.${this}
表示當前的選擇元素this

8.opacity：透明度屬性spa

9.stop(stopAll,goToEnd)方法 > 重點
stopAll:可爲true或false，中止該元素當前全部的animate動做
goToEnd:可爲true或false，結束該元素當前的animate動做後中止

接下來分爲三個模塊跟你們來說解：

Html模塊

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>關燈效果</title>
    <script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/light.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <script src="jq/light.js"></script>
</head>
<body>
    <div class="wrap">//裝圖片的盒子
            <div class="box left">//第一張圖片，接下來以此遞增
                <a href="#"><img src="img/1.jpg" ></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/2.jpg"></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/3.jpg"></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/4.jpg"></a>
            </div>
            <div class="box left">
                <a href="#"><img src="img/5.jpg"></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/6.jpg"></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/7.jpg"></a>
            </div>

            <div class="box left">
                <a href="#"><img src="img/8.jpg"></a>
            </div>
            <div class="box left">
                <a href="#"><img src="img/9.jpg"></a>
            </div>
    </div>
</body>
</html>

Css模塊

body{
    background-color: #000000;
    position: relative;
}
.wrap{//放圖片盒子的高和寬以及定位，這個盒子wrap絕對定位是把父級的position做爲參考的,當前是依據body來移動
//由於body是它的父級，同時帶有position：relative屬性.
    width: 624px;
    height: 468px;
    position: absolute;
    top:200px;
    left: 34%;
}
.wrap img{ //肯定圖片的大小
    width: 208px;
    height: 156px;
    vertical-align: top;
}
.left{
    float: left; //圖片向左浮動，能夠排在同一行上
}

JQuery模塊

$(function(){
    $("div.box").mouseover(function() { //當鼠標移入時，當前box的透明度爲1，兄弟元素的透明度變爲0.2，耗時0.5秒
        $(this).stop(true,false);//中止該元素當前全部的animate動做
        $(this).animate({opacity:'1'}).siblings().animate({opacity:'0.2'},500)
    });
    $(".wrap").mouseleave(function(){//當鼠標移出wrap這個大盒子時，全部的圖片透明度變成1
        $("div.box").stop(true,false);//中止該元素當前全部的animate動做
        $("div.box").siblings().stop(false,true).animate({opacity:'1'},500)
    });
})

這裏重點講stop()方法：
若是沒有stop方法，則當前的動畫不會中止，要按順序執行完成後才執行下一步操做，如：

今天的分享就到這裏了，我很喜歡羅振宇，更喜歡他所創造的獲得APP,這個APP的態度就是要和你一塊兒終身學習，是一種開放的形態，他想與全部的聽衆一塊兒變得更好.因此我想學習他，但願可讓看這篇博文的你，也愈來愈好.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。