1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    jQuery實現手風琴小案例_jquery

    來源:腳本之家  責任編輯:小易  

    本文實例為大家分享了jQuery實現手風琴的具體代碼,供大家參考,具體內容如下

    代碼演示效果:

    1.運用jQuery,動畫樣式進行輪播圖切換
    2.前提,需要引入animate.css(官網下載就有)

    HTML代碼:

    <head>
        <meta charset="UTF-8">
        <title>手風琴</title>
        <link rel="stylesheet" href="../animate.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="../jquery-3.1.0.js"></script>
        <!--    <script src="js/手風琴index.js"></script>-->
    
    </head>
    <body>
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg"></div>
        <div class="bg bg-active"></div>
        <div class="main">
            <ul>
                <li><div><p>穿越火線</p></div></li>
                <li><div><p>王者榮耀</p></div></li>
                <li><div><p>使命召喚</p></div></li>
                <li class="li-active"><div><p>英雄聯盟</p></div></li>
            </ul>
        </div>
    </body>

    script代碼:

    <script>
        $(function () {
           $("li").mouseenter(function () {
               //stop()阻止動畫效果
               $(this).stop().animate({width:"700px"},1000,"linear").fadeIn();
               $(this).siblings("li").stop().animate({width:"100px"},1000,"linear").fadeIn();
               $(".bg").eq($(this).index()).siblings(".bg").stop().fadeOut();
               $(".bg").eq($(this).index()).stop().animate({top:"700px"},400,"linear").fadeIn();
    
           }); 
        });
    </script>

    css代碼:

    *{
        margin: 0;
        padding: 0;
    }
    html,body, .bg{
        height: 700px;
        width: 1400px;
        overflow: hidden;
    }
    body{
        position: relative;
    }
    .bg{
        display: none;
    }
    .bg:nth-child(1){
        background:url("../images/1.jpg")no-repeat center/cover;
    }
    .bg:nth-child(2){
        background:url("../images/2.jpg")no-repeat center/cover;
    }
    .bg:nth-child(3){
        background:url("../images/3.jpg")no-repeat center/cover;
    }
    .bg:nth-child(4){
        background:url("../images/4.jpg")no-repeat center/cover;
    }
    /*大背景顯示*/
    .bg-active{
        display: block;
    }
    .main{
        position: absolute;
        width: 1000px;
        height: 400px;
        /*background-color: pink;*/
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .main ul{
        list-style: none;
    }
    .main ul li{
        float: left;
        width: 100px;
        height: 400px;
        transition:right 1s;
    }
    /*小背景顯示*/
    .main ul li.li-active{
        width: 700px;
        height: 400px;
    
    }
    .main ul li:nth-child(1){
         background: url("../images/1.jpg")no-repeat center/cover;
     }
    .main ul li:nth-child(2){
        background: url("../images/2.jpg")no-repeat center/cover;
    }
    .main ul li:nth-child(3){
        background: url("../images/3.jpg")no-repeat center/cover;
    }
    .main ul li:nth-child(4){
        background: url("../images/4.jpg")no-repeat center/cover;
    }
    .main ul li div{
        height: 400px;
        width: 100px;
        background-color: rgba(0,0,0,.5);
    }
    .main ul li div p{
        color: #fff;
        padding: 40px;
        font-size: 20px;
        opacity: 0.5;
    }


  3. 本文相關:
  4. 關于用jquery的height()、width()計算動態插入的img標簽的寬高的
  5. jquery內部原理和實現方式淺析
  6. jquery 可排列的表實現代碼
  7. jquery實現簡單倒計時功能的方法
  8. jquery中的$.ajax()方法應用
  9. jquery在ie下使用未閉合的xml代碼創建元素時的bug介紹
  10. jquery實現本地存儲
  11. 使用camanjs在web頁面上處理圖像的技巧
  12. jquery插件star-rating.js實現星級評分特效
  13. 基于jquery實現仿淘寶套餐選擇插件
  14. jquery的手風琴特效
  15. 高分求jquery 手風琴效果實現代碼
  16. 如何用JQuery實現后臺管理系統left中的手風琴效果。。
  17. 一個JQUERY簡單的手風琴效果不知哪里錯了,動不起來
  18. 求個簡單的jquery垂直手風琴菜單特效
  19. jQuery手風琴菜單 跪求圖面上面這種JQ手風琴效果,...
  20. jquery扁平手風琴代碼 怎么寫
  21. jquery如何實現鼠標點擊事件(如同手風琴效果,但...
  22. jquery,實現手風琴。。。求解釋代碼,看不懂下面...
  23. 怎么使jquery手風琴全部折疊
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全yui.ext相關prototypejqueryangularjsjsonlib_jsjs面向對象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首頁javascriptjavascript類庫jquery easyui使用(一)之可折疊面板的布局手風琴菜單jquery插件制作 手風琴panel效果實現jquery制作效果超棒的手風琴折疊菜單jquery實現的簡單手風琴效果示例基于jquery代碼實現手風琴菜單基于jquery的slidedown和slideup做手風琴jquery實現手風琴效果實例代碼jquery手風琴特效插件jquery組件easyui實現手風琴(折疊面板)示例jquery實現手風琴效果關于用jquery的height()、width()計算動態插入的img標簽的寬高的jquery內部原理和實現方式淺析jquery 可排列的表實現代碼jquery實現簡單倒計時功能的方法jquery中的$.ajax()方法應用jquery在ie下使用未閉合的xml代碼創建元素時的bug介紹jquery實現本地存儲使用camanjs在web頁面上處理圖像的技巧jquery插件star-rating.js實現星級評分特效基于jquery實現仿淘寶套餐選擇插件jquery加載頁面的方法(頁面加載完jquery獲取和修改img的src值的方jquery判斷checkbox是否選中的3種jquery獲取復選框被選中的值jquery 綁定select標簽的onchangjquery判斷radio(單選框)是否選jquery $(document).ready() 與wjquery 將disabled的元素置為enajquery判斷元素是否隱藏的多種方jquery中獲取id值方法小結當jquery ajax遇上401請求的解決方法jquery each()小議jquery 彈出層實現代碼基于jquery的表格隔行換色,移動換色,點jquery實現鼠標拖拽登錄框移動效果基于jquery和原生javascript實現網頁定位jquery判斷子iframe何時加載完成解決方案jquery easyui菜單組件menu使用詳解(15)解決jquery下拉框數據動態獲取的問題jquery操作動態生成的內容的方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载