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

array_huang 發布于2019-08-02 11:55 / 2290人閱讀

摘要：源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫的一款關燈效果，然后自已去實現它主要是鼠標移入移出它的狀態發生改變開始講解前，為大家做一些知識儲備，在接下來的實操中會用到方法鼠標移入，會實現函數里的操作方法鼠標移出，會實

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

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

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

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

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

4.animate()方法
添加動畫

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

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

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

8.opacity：透明度屬性

9.stop(stopAll,goToEnd)方法 > 重點
stopAll:可為true或false，停止該元素當前所有的animate動作
goToEnd:可為true或false，結束該元素當前的animate動作后停止

接下來分為三個模塊跟大家來講解：

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的態度就是要和你一起終身學習，是一種開放的形態，他想與所有的聽眾一起變得更好.
所以我想學習他，希望可以讓看這篇博文的你，也越來越好.

云服務器 GPU云服務器第7天:CSS入門 JQurey jqurey?easy?ui 事件 41

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53209.html

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

摘要：源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫的一款關燈效果，然后自已去實現它主要是鼠標移入移出它的狀態發生改變開始講解前，為大家做一些知識儲備，在接下來的實操中會用到方法鼠標移入，會實現函數里的操作方法鼠標移出，會實 showImg(https://segmentfault.com/img/bVbjbc6?w=398&h=305); 源碼下載地址：鏈接：http...

BearyChat 2019-08-29 17:10 評論0 收藏0
《第41天：JQurey - 關燈效果》

摘要：源碼下載地址鏈接提取碼如果有贊就很幸福了今天要和你們分享的是我看了庫的一款關燈效果，然后自已去實現它主要是鼠標移入移出它的狀態發生改變開始講解前，為大家做一些知識儲備，在接下來的實操中會用到方法鼠標移入，會實現函數里的操作方法鼠標移出，會實 showImg(https://segmentfault.com/img/bVbjbc6?w=398&h=305); 源碼下載地址：鏈接：http...

tuomao 2019-08-23 12:51 評論0 收藏0
面試邏輯題

摘要：分享一下今天看到的幾道邏輯題一群人開舞會，每人頭上都戴著一頂帽子。根據題意可知，號碼為的燈，撥開關的次數等于的約數的個數，約數個數是奇數，則一定是平方數。因為的平方等于，可知以內共有個平方數，即，最后關熄狀態的燈共有盞，編號為。分享一下今天看到的幾道邏輯題一群人開舞會，每人頭上都戴著一頂帽子。帽子只有黑白兩種，黑的至少有一頂。每個人都能看到其它人帽子的顏色，卻看不到自己的。主持人先...

renweihub 2019-08-20 16:41 評論0 收藏0
貓頭鷹的深夜翻譯：使用組合模式來開關燈

摘要：為了挽救這一點，這篇博客將用一個簡單有效的例子來解釋組合模式。唯一需要記住的是組合模式通常用在一個樹結構的遞歸操作上。這個接口我們命名為，對應于組合模式中的。這種多米諾骨牌效應也是組合模式的一個特點。前言設計模式可能是博客圈最熱門的話題之一。但是，用來說明每個設計模式的例子通常不是很形象。為了挽救這一點，這篇博客將用一個簡單有效的例子來解釋組合模式。我們不會再重復解釋這個模型的概...

elina 2019-08-15 14:17 評論0 收藏0
第一課:超級hello Arduino.使用多種知識串聯一個入門小項目,很適合初學第一課喲.

摘要：開關旋鈕電位器的實驗視頻已經購買開發版的同學開始上課來一場緊張刺激的之旅吧前言開發工具的下載安裝使用都很簡單我這里就不贅述了附上官方的說明跟著步驟來十分鐘搞定相關連接下載官方為什么成為開發函數 ...

philadelphia 2021-09-06 15:00 評論0 收藏0