成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

《第41天：JQurey - 關(guān)燈效果》

BearyChat / 877人閱讀

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

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

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

1.mouseover( function(){} )方法
鼠標(biāo)移入，會實(shí)現(xiàn)函數(shù)里的操作

2.mouseleave(function(){})方法
鼠標(biāo)移出，會實(shí)現(xiàn)函數(shù)里的操作

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

4.animate()方法
添加動畫

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

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

7.${this}
表示當(dāng)前的選擇元素

8.opacity：透明度屬性

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

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

Html模塊



    
    關(guān)燈效果
    
    
    
    


    
//裝圖片的盒子
            
//第一張圖片，接下來以此遞增
                
            


            

                
            


            

                
            


            

                
            

            

                
            


            

                
            


            

                
            


            

                
            

            

                
            

    



Css模塊
body{
    background-color: #000000;
    position: relative;
}
.wrap{//放圖片盒子的高和寬以及定位，這個盒子wrap絕對定位是把父級的position作為參考的,當(dāng)前是依據(jù)body來移動
//因?yàn)閎ody是它的父級，同時帶有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() { //當(dāng)鼠標(biāo)移入時，當(dāng)前box的透明度為1，兄弟元素的透明度變?yōu)?.2，耗時0.5秒
        $(this).stop(true,false);//停止該元素當(dāng)前所有的animate動作
        $(this).animate({opacity:"1"}).siblings().animate({opacity:"0.2"},500)
    });
    $(".wrap").mouseleave(function(){//當(dāng)鼠標(biāo)移出wrap這個大盒子時，所有的圖片透明度變成1
        $("div.box").stop(true,false);//停止該元素當(dāng)前所有的animate動作
        $("div.box").siblings().stop(false,true).animate({opacity:"1"},500)
    });
})

這里重點(diǎn)講stop()方法：
如果沒有stop方法，則當(dāng)前的動畫不會停止，要按順序執(zhí)行完成后才執(zhí)行下一步操作，如：

今天的分享就到這里了，我很喜歡羅振宇，更喜歡他所創(chuàng)造的得到APP,這個APP的態(tài)度就是要和你一起終身學(xué)習(xí)，是一種開放的形態(tài)，他想與所有的聽眾一起變得更好.
所以我想學(xué)習(xí)他，希望可以讓看這篇博文的你，也越來越好.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114143.html

相關(guān)文章

  • 《第41天：JQurey - 關(guān)燈效果》

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

    array_huang 評論0 收藏0

  • 《第41天：JQurey - 關(guān)燈效果》

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

    tuomao 評論0 收藏0

  • 面試邏輯題

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

    renweihub 評論0 收藏0

  • 貓頭鷹的深夜翻譯：使用組合模式來開關(guān)燈

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

    elina 評論0 收藏0

  • 第一課:超級hello Arduino.使用多種知識串聯(lián)一個入門小項(xiàng)目,很適合初學(xué)第一課喲.

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

    philadelphia 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<