WEB前端第四十五课——jQuery框架(三)animate、轮播图&百叶窗案例

1.呼吸轮播图案例

  ① user-select,该属性用于控制用户能够选中文本,

    常用属性值:

      none,表示元素及其子元素的文本不可选中。

      text,用户可以选择文本。

      auto、all、contain等

  ② is(":animated"),用于判断元素是否处于动画状态。

    为了避免动画积累效应,设置该判断条件,如果元素不处于动画状态才添加新的动画。

    语法:$("选择器") .is(":animated");  //返回值为Boolean

  ③ index(),搜索匹配的元素返回指定元素的索引值,语法格式有三种写法:

    $("选择器") .index();  //表示当前 jq对象的第一个元素相对于其同辈元素的位置索引;

    $("选择器1") .index("选择器2");  //表示选择器1对应的元素在所有选择器2元素中的索引位置;

    $("选择器1") .index($("选择器2") );  //表示选择器2对应的元素在所有选择器1元素中的索引位置。

<head>
    <meta charset="UTF-8">
    <title>呼吸轮播图</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .container{
            width: 520px;height: 780px;margin: 0 auto;padding: 0;
            border: 1px solid fuchsia;position: relative;
        }
        .imgUl{list-style: none;}
        .imgUl li{position: absolute;display: none;}
        .imgUl li:first-child{display: block;}
        .leftBtn,.rightBtn{
            width: 25px;height: 40px;background-color: darkorange;
            color: white;font-size: 30px;line-height: 36px;text-align: center;
            position: absolute;top: 46%;cursor: pointer;
            user-select: none;      /*设定元素内文本内容无法选中*/
        }
        .rightBtn{right: 0;}
        .anchorUl{
            list-style: none;position: absolute;left: 32%;bottom: 50px;
        }
        .anchorUl>li{
            width: 15px;height: 15px;border: 3px solid orangered;
            border-radius: 50%;display: inline-block;float: left;
            margin: 0 3px;padding:0;cursor: pointer;
        }
        .anchorSelect{background-color: aqua;}
    </style>
</head>
<body>
    <div class="container">
        <ul class="imgUl">
            <li><a href="#"><img src="Images/Rotation/rotation01.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation02.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation03.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation04.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation05.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation06.jpg" alt=""></a></li>
            <li><a href="#"><img src="Images/Rotation/rotation07.jpg" alt=""></a></li>
        </ul>
        <div class="leftBtn"><</div>
        <div class="rightBtn">></div>
        <ul class="anchorUl">
            <li class="anchorSelect"><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
    <script>
        var $imgLis=$(".imgUl li");
        var $leftBtn=$(".leftBtn");
        var $rightBtn=$(".rightBtn");
        var $anchorLis=$(".anchorUl li");
        var timer=null;
        var picIndex=0;
        $leftBtn.click(function () {
            if ($imgLis.is(":animated")){
                return;
            }
    //使用“.eq()”方法选择指定jq对象中对应索引的元素
            $imgLis.eq(picIndex).fadeOut(1000);
            $anchorLis.eq(picIndex).removeClass("anchorSelect")
            picIndex--;
    //      设置锚点的选中状态切换
    //向左翻页时索引值自减,当减到0时下次点击则从最后一个索引重复循环
            if (picIndex<=-1){
                picIndex=6;
            }
            $imgLis.eq(picIndex).fadeIn(1000);
            $anchorLis.eq(picIndex).addClass("anchorSelect")
        });
        $rightBtn.click(function () {
    //使用“animated”属性判断指定元素中是否存在动画运行,
    //如果有则忽略任何新的触发操作,进而避免“动画积累”问题
    //  该方式与“stop()"方式存在一定差别。
            if ($imgLis.is(":animated")){
                return;
            }
            $imgLis.eq(picIndex).fadeOut(1000);
            $anchorLis.eq(picIndex).removeClass("anchorSelect")
            picIndex++;
            if (picIndex>=7){
                picIndex=0;
            }
            $imgLis.eq(picIndex).fadeIn(1000);
            $anchorLis.eq(picIndex).addClass("anchorSelect")
        });
    //设置通过锚点方式切换图片
        $anchorLis.mouseenter(function () {
            $(".anchorSelect").removeClass("anchorSelect");
            $imgLis.eq(picIndex).fadeOut(1000);
            picIndex=$(this).index();       //获取当前节点在其对应的jq对象中的索引位置
            $(this).addClass("anchorSelect");
            $imgLis.eq(picIndex).fadeIn(1000);
        });
    //  设置定时自动触发轮播,将向右按钮切换时间设置间隔执行函数。
        timer=setInterval(function () {
            if ($imgLis.is(":animated")){
                return;
            }
            $imgLis.eq(picIndex).fadeOut(2000);
            $anchorLis.eq(picIndex).removeClass("anchorSelect")
            picIndex++;
            if (picIndex>=7){
                picIndex=0;
            }
            $imgLis.eq(picIndex).fadeIn(2000);
            $anchorLis.eq(picIndex).addClass("anchorSelect")
        },3000);
    </script>
</body>
</html>

2.animate()方法

  jQuery中的自定义动画方法

  ① 基本形态,animate函数包含领个参数,第一个参数是动画的最终样式(JSON格式)

       第二个参数是执行动画所需要的时间(毫秒)

    语法示例:$("选择器") .animate({JSON样式}, time);

         即使样式中只有一种属性,也要使用JSON格式书写,不能使用k,v格式。

  在jQuery中“background-color、background-position”不能通过animate()方法生成动画效果。

  能够使用animate()生成动画效果的属性基本上都是数值型的、可量化的。

  ② 动画顺序

    同步原则,同一个元素如果存在多个animate()命令,则按照添加顺序执行;

    异步原则,不同元素分别设置各自的animate()命令,则它们同时执行。

  ③ 匀速运动

    animate()方法的第三个参数用于定义动画时间曲线,可选参数,

    animate()方法默认的动画并不是匀速执行的,而是先加速后减速的方式。

    animate()方法自带的两种动画效果,linear(线性匀速)、swing(先加速后减速,默认)

  ④ 回调函数

    animate()方法的第四个参数用于定义回调函数,可选参数,为动画执行完成时执行的函数。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        .div{
            width: 100px;height: 100px;background-color: orangered;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="div"></div>
<script>
    $('.div').click(function () {
        $(this).animate({left:700},2000,"linear")
            .animate({height:500},1000,"swing")
            .animate({height: 100,top:400},1000,function () {
                $(this).css("backgroundColor","skyblue")
            });
    });
</script>
</body>
</html>

3.stop()方法

  用于停止元素动画。

    语法:$("选择器") .stop(clearAllAnimation,goToEnd);

    该方法有两个参数(都是Boolean):

      第一个参数表示是否清空所有动画,默认为“false”,表示不清除;

      第二个参数表示是否立即完成当前动画,默认为“false”,表示不立即完成。

    两个参数都可以不写,此时采用默认值。

4.百叶窗案例

  ① find(),该方法用于搜索指定元素的所有符合条件的后代元素。

    语法:$("选择器") .find("后代选择器");

   ps:符合条件的后代包括子元素、孙元素等所有后代;

     如果要返回所有后代元素,则后代选择器使用“*”。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQueryFiles/jquery-1.8.3.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .container{
            width: 912px;height: 780px;border: 1px solid orangered;
            margin: 0 auto;overflow:hidden;position: relative;
        }
        .container ul{list-style: none;cursor: pointer}
        .container ul li{position: absolute}
        .cover{
            width: 100%;height: 780px;background-color: rgba(255,100,150,.6);
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><div class="cover"></div><img src="Images/Rotation/rotation01.jpg" alt=""></li>
            <li><div class="cover"></div><img src="Images/Rotation/rotation02.jpg" alt=""></li>
            <li><div class="cover"></div><img src="Images/Rotation/rotation03.jpg" alt=""></li>
            <li><div class="cover"></div><img src="Images/Rotation/rotation04.jpg" alt=""></li>
            <li><div class="cover"></div><img src="Images/Rotation/rotation05.jpg" alt=""></li>
            <li><div class="cover"></div><img src="Images/Rotation/rotation06.jpg" alt=""></li>
        </ul>
    </div>
<script>
    var $picLis=$(".container ul li");
    var picIndex=0;
    for(var i=0;i<$picLis.length;i++){
        picIndex=$picLis.eq(i).index();
        $picLis.eq(i).css("left",picIndex*152+"px")
    }
    $picLis.mouseenter(function () {
        $picLis.stop();
        var selectIndex=$(this).index();
        for(var i=0;i<$picLis.length;i++){
            picIndex=$picLis.eq(i).index();
            if (picIndex<=selectIndex){
                $picLis.eq(i).animate({"left":picIndex*78.4+"px"},1000);
            }else {
                $picLis.eq(i).animate({"left":(picIndex-1)*78.4+520+"px"},1000);
            }
        }
        $(this).find(".cover").stop(true,true).fadeOut(1000);
    }).mouseleave(function () {
        $picLis.stop();
        for(var i=0;i<$picLis.length;i++){
            picIndex=$picLis.eq(i).index();
            $picLis.eq(i).animate({"left":picIndex*152+"px"},1000);
            $(this).find(".cover").stop(true,true).fadeIn(1000);

        }
    });
</script>
</body>
</html>

  

posted @ 2020-09-18 23:35  后来喵  阅读(669)  评论(0编辑  收藏  举报