天天看点
返回

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实现简单的动画效果

继续阅读