jQuery——自定义插件练习（从左向右、从上向下、大爆炸动画）

灰太狼 2023-06-06 12:12 19阅读 0赞

###### 自定义jQuery插件实现三种动画效果 ######

###### 效果图 ######

![在这里插入图片描述][20191011195930682.gif]

> 思路：
> 
> 1.  先创建页面元素，① 将图片分别放入到创建的a链接中。并将a集合加入至页面中。为每个a设置不同的`zIndex`。② 创建三种不同碎片集合，分别对应从左到右、从上到下、大爆炸动画。在创建碎片集合时除了设置其高、宽、位置，还要设置每个碎片中的`background-size`和`background-position`。将三种不同碎片集合`push`进一个数组中，供后续动画切换使用。
> 2.  调用默认动画：遍历`a`集合，找出`zIndex`值最大的索引，并通过该索引调用下一张照片对应的动画函数。在该动画函数中，设置页面碎片元素（用找出的索引值求得当前所需要的碎片集合以及当前需要展示的图片）。设置完碎片元素后，根据不同延迟时间将碎片显示出来（动画形式使得每个碎片的`opacity`变为1）。在所有碎片显示出来后重新设置`a`集合中所有元素的`zIndex`值，在设置`zIndex`值时，与`a`集合长度-1相等的元素淡入，其他元素都淡出。在设置完所有元素的`zIndex`值后再次调用下一次动画（此时与异步有关）。以此循环。

###### 该案例中的几个重要部分： ######

① 不需要使用定时器，直接在本次动画结束后调用下一次动画即可  
② 在选择动画函数时，用当前展示的图片对应的index%3(有三种动画函数)，选择碎片集合时也用当前展示的图片对应的`index`%3，选择图片时，由于图片地址是从下标1开始的，且当前index为即将展示图片的前一个图片元素对应的索引。故当选择图片时，需要给`当前索引+2`，从而获取到即将展示图片的正确`url`（当当前展示的图片为最后一张图片时，即将展示的图片则为索引为0的图片元素，此时在选择图片时，应作相应的变化）  
③ 当所有碎片的`opacity`变为1后，重新设置`a`集合所有元素的`zIndex`：可在遍历`a`集合后调用`last()`方法，再调用`queue()`方法  
④ 大爆炸动画：先将碎片的宽和高设为0，将所有碎片集中在最中间（从中间散开），不透明度设为0。随机生成每个碎片的延迟时间，遍历碎片集合，在每个碎片的延迟时间后设置其宽、高、位置和不透明度。当所有碎片显示后重新设置`a`集合的每个元素的`zIndex`。

###### 完整代码 ######

.all{ 
        position: relative;
    }
    .imageList{ 
        position: absolute;
        margin:auto
    }
    .imageList>a{ 
        position:absolute;
    }
    .imageList>a>img{ 
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .smallList{ 
    position: absolute;
    }

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="slider.css" rel="stylesheet">
    </head>
    <body>
    <div class="all">
        <img src="../img/demo1.jpg"/>
        <img src="../img/demo2.jpg"/>
        <img src="../img/demo3.jpg"/>
        <img src="../img/demo4.jpg"/>
        <img src="../img/demo5.jpg"/>
        <img src="../img/demo6.jpg"/>
    </div>
    </body>
    <script src="../js/jquery-3.0.0.js"></script>
    <script src="slider.js"></script>
    <script> $(function () { $(".all").MySlider({ width: 1000, height: 400, time: 1500, animate: ["fadeTopLeft", "fadeTopBottom", "boom"], speed: 1300 }); }) </script>
    </html>

[20191011195930682.gif]: /images/20230601/b749407a97e34196895a30fb3c8f234a.png