天天看點
傳回

3. 前端--jQuery實作動畫效果

文章目錄

    • 前端--jQuery實作動畫效果
      • 1. 案例引入jq動畫
        • 1.1 突出顯示
        • 1.2 右下角廣告
      • 2. animate定義動畫
        • 2.1 先探CSS3動畫
        • 2.2 jq實作手風琴效果☆
    • ☆

前端–jQuery實作動畫效果

1. 案例引入jq動畫

img

1.1 突出顯示 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>突出顯示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        #box {
            width: 640px;
            margin: 100px auto 0px;
            border: 1px solid #ccc;
        }

        img {
            display: block;
        }

        ul {
            padding-bottom: 10px;
        }

        #box > ul > li {
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        /**
         *
         */
        $(function () {
            $("#box>ul").on("mouseenter", "li", function () {
                $(this).siblings().stop().fadeTo(1000, 0.4);
            }).on("mouseleave", "li", function () {
                $(this).siblings().stop().fadeTo(1000, 1);
            })
        });

    </script>
</head>
<body bgcolor="black">
<div id="box">
    <ul class="clearfix">
        <li><img src="img/01.jpg" alt=""></li>
        <li><img src="img/02.jpg" alt=""></li>
        <li><img src="img/03.jpg" alt=""></li>
        <li><img src="img/04.jpg" alt=""></li>
        <li><img src="img/05.jpg" alt=""></li>
        <li><img src="img/06.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

1.2 右下角廣告

slideDown是顯示，顯示的方向跟定位的方向有關。

  • 設定top slideDown是向下

  • 如果定位bottom ，那麼slideDown就是向上拉動顯示。
動畫函數裡面有兩個參數，第一個參數是動畫執行的時間，第二個參數是回調函數。動畫執行完成後執行的函數。

  • stop() 方法停止目前正在運作的動畫。

  • 回調函數

     就是一個通過函數指針調用的函數。如果你把函數的指針（位址）作為參數傳遞給另一個函數，當這個指針被用來調用其所指向的函數時，我們就說這是回調函數。回調函數不是由該函數的實作方直接調用，而是在特定的事件或條件發生時由另外的一方調用的，用于對該事件或條件進行響應。 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>右下角廣告</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #box {
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#box").hide();
            $("#btn").click(function () {
                $("#box").slideDown(1000).slideUp(1000).fadeIn(1000);
            })

        });
    </script>
</head>
<body>
<button id="btn">按鈕</button>
<div id="box">
    <img src="img/01.jpg" alt="">
</div>
</body>
</html>

2. animate定義動畫

animate({},1000,fun);

  1. {} 屬性值與原屬性有內插補點，才會有動畫效果。

  2. 1000 動畫執行的時間。

  3. fun 回調函數。動畫執行完成後，執行目前函數。

     
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>自定義動畫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #box {
            width: 80px;
            height: 80px;
            background-color: lightgreen;
            position: relative;
            left: 0px;
            top: 0px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("button:eq(0)").click(function () {
                $("#box").animate({"left": "400px"}, 1000);
                $("#box").animate({"top": "400px"}, 1000);
                $("#box").animate({"left": "0px"}, 1000);
                $("#box").animate({"top": "0px"}, 1000);
            });

            $("button:eq(1)").click(function () {
                $("#box").animate({"left": "400px", "top": "400px"}, 1000);
            });

            $("button:eq(2)").click(function () {
                $("#box").animate({"width": "400px", "height": "400px"}, 1000);
            });

        });
    </script>
</head>
<body>
<button>轉圈</button>
<button>對角</button>
<button>放大</button>
<div id="box"></div>
</body>
</html>

2.1 先探CSS3動畫

transform: rotate(360deg);

 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>CSS3動畫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #box {
            width: 200px;
            height: 200px;
            position: fixed;
            top: 150px;
            left: 150px;
        }

        #box > img {
            width: 200px;
            height: 200px;
        }

        img {
            transition: all 1s;
        }

        /*img:hover {*/
        /*    transform: rotate(360deg);*/
        /*}*/
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("img").mouseenter(function () {
                $("img").css("transform", "rotate(360deg)");
            }).mouseleave(function () {
                $("img").css("transform", "rotate(0deg)");
            })

        });
    </script>
</head>
<body>
<div id="box">
    <img src="img/04.jpg" alt="">
</div>
</body>
</html>

2.2 jq實作手風琴效果☆

案例所用圖檔 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>手風琴效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        #box {
            width: 1200px;
            margin: 100px auto 0px;
            border: 1px solid #ccc;
            overflow: hidden;
        }

        #box > ul {
            width: 1300px;
        }

        #box > ul > li {
            width: 200px;
            float: left;
            /*transition:1s;*/
        }

        #box > ul > li > img {
            display: block;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        /**
         *   由于快速滑動的時候，每個li都在計算寬度，會出現微小的誤差，
         *   有可能，有li寬度總和會大于1200px ，
         *   會造成浮動的盒子換行，還有可能小于1200px,右邊會出現小白邊。
         *   解決方案：
         *      1.給ul寬度設定大于1200px,給1300px.
         *      2.讓每個li寬度都大于200px 可以給202px.讓移動上去的時候，盒子縮小後寬度大于140px,可以給142px。
         */

        $(function () {
            // $("#box>ul").on("mouseenter", "li", function () {
            //     $(this).css("width", "500px").siblings().css("width", "140px")
            // }).on("mouseleave", "li", function () {
            //     $(this).css("width", "200px").siblings().css("width", "200px");
            // })
            $("#box>ul").on("mouseenter", "li", function () {
                $(this).stop().animate({"width": "500px"}, 1000).siblings().stop().animate({"width": "140px"}, 1000);
            }).on("mouseleave", "li", function () {
                // $(this).stop().animate({"width":"200px"},1000).siblings().stop().animate({"width":"200px"},1000);
                $("#box>ul>li").stop().animate({"width": "200px"}, 1000);
            })
        });
    </script>
</head>
<body>
<div id="box">
    <ul class="clearfix">
        <li><img src="img/pic/01.jpg" alt=""></li>
        <li><img src="img/pic/02.jpg" alt=""></li>
        <li><img src="img/pic/03.jpg" alt=""></li>
        <li><img src="img/pic/04.jpg" alt=""></li>
        <li><img src="img/pic/05.jpg" alt=""></li>
        <li><img src="img/pic/06.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

☆

# 前端-JQuery sq css3 動畫
上一篇: 删除連結清單倒數第 n 個結點
下一篇: HTML + JS實作簡單的動畫效果

繼續閱讀