前言:
定制化开发这个案例是几年前的了,定制化开发现在的王者官网是没有定制化开发这个手风琴模块的,定制化开发我了解到这个案例,定制化开发是受到了黑马程序员知名教师——的启发,定制化开发我相信大家也都不陌生,定制化开发同样也是我非常尊敬的一位老师,定制化开发我就不做过多的介绍,定制化开发我们今天系统的讲解一定制化开发下这个案例,定制化开发我个人觉得这个案例虽然简单,定制化开发但是比大部分的手风琴定制化开发案例都要好上一些,定制化开发既然是系统的学习,定制化开发那我们在讲知识点前,先看一下成品效果,当我们鼠标放到小图上时,小图淡出,大图淡入,非常好的效果:
*常用动画都会讲到,内容较多,可以直接点击目录跳到相应位置查看
目录
一.jQuery效果动画
我们在之前的博客中已经讲述到过show和hide效果,但是没有具体的阐述过,这次我们系统的阐述一下:
1.显示和隐藏效果:
显示:
语法规范:show([speed,[easing],[fn]])
tips:[ ]中参数可写可不写
我们对参数进行解释:
speed:用来设置此动画的速度,有四个值:slow(慢),normal(自然正常),fast(快), 自定义毫秒数(如:1000);
easing:用来指定切换的效果,有俩个值:(默认值【慢-快-慢】),linear(匀速)
fn就不用多说了,我们的老朋友,回调函数(等待动画执行完毕在执行回调函数里的操作)
隐藏:
语法规范:hide([speed,[easing],[fn]])
和上面显示效果的参数一致,在这里我们不做过多解释
2.滑动效果:
*s,e,fn是speed,easing,fn的简写
下滑动:sildeDown([s],[e],[fn])
上滑动:sildeUp([s],[e],[fn])
滑动切换效果: sildeToggle([s],[e],[fn])
tips:滑动切换的意思是:触发一次事件,就上滑动/下滑动一次,交替进行,如果这次触发是上滑动,那么下一次触发就是下滑动
3.事件的切换:
hover([over,]out)
我们来对参数解释一下:
over:鼠标移动到元素上触发的函数 (相当于原生JS里的mouseenter)
out:鼠标移出元素所触发的函数(相当于原生JS里的mouseleave)
理论我们讲述完毕,我们这里使用代码演示一下,因为事件切换和之前的语法使用不太一样:
- $("div").hover(function(){},function(){})
- //我们获取div元素
- //第一个函数表示经过div所做出的动画或效果
- //第一个函数表示离开div所做出的动画或效果
这里提供一种更加简便的写法:
- $("div").hover(function(){
- $(this).slideToggle();
- });
- //我们只写一个函数方法,在唯一的这个函数里,写上我们的切换效果
- //我们使用上面讲到过的滑动切换来举例子
- //无论鼠标经过还是厉害,都会切换函数里的触发滑动切换实现效果
4.动画队列的停止:
我们学了动画是为了展现更好的交互效果,那为什么又要学习停止动画呢?
是因为动画效果有队列这一个解释:
动画效果一旦触发就会去执行,如果用户使其一直触发,就会造成多个动画效果排队执行的情况,会使用户体验非常的差,所以我们需要在当前这个动画执行时,先将之前的动画停止,这样就实现了无论用户触发多少次,在当下只会执行当前触发的这一个动画效果
停止排队:
语法规范:stop()
tips:stop()需要写在动画效果之前,相当于停止上一层动画
- $("div").hover(function(){
- $(this).stop().slideToggle();
- });
5.淡入淡出效果:
语法规范:
淡入:fadeIn([speed,[easing],[fn]])
淡出:fadeOut([speed,[easing],[fn]])
淡入淡出切换:fadeToggle([speed,[easing],[fn]])
渐进方式调整元素达到指定的不透明度: fadeTo(speed,opacity[easing],[fn])
tips:渐进调整透明度时——opacity和speed时间必须要写
6.自定义动画
animate(params,[speed],[easing],[fn])
我们来解释一下这个新参数:
params:填写想要更改的样式属性【要以对象的形式来转递,必须要写,属性名可以不用带引号】
我们这个自定义动画和之前的动画效果传递方式不一样,所以我们这里使用代码书写一个小案例(点击按钮,让盒子做一些动画效果):
- $(function(){
- $("button").click(function(){
- $("div").animate({//必须以对象的形式来写
- width:500,
- top:500,
- opacity:.4,
- backgroundColor:"#000"
- },500);
- });
- });
二.手风琴案例实践
首先利用HTML我们搭建好框架:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <!-- 引入我们的jQuery文件 -->
- <script src="./js/jquery.min.js"></script>
- </head>
- <body>
- <!-- 创建盒子存放元素 -->
- <div class="bigbox">
- <!-- 盒子里创建ul存放每一个li小块 -->
- <ul>
- <!-- 利用li存放俩张图片 -->
- <!-- 思路:鼠标移动到li上,让li的大图显示,小图隐藏 -->
- <li class="current">
- <!-- a标签是为了可以点击跳转到相应英雄介绍,整体项目开发会用到 -->
- <a href="#">
- <img src="images/m1.jpg" alt="" class="small">
- <img src="images/m.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/l1.jpg" alt="" class="small">
- <img src="images/l.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/c1.jpg" alt="" class="small">
- <img src="images/c.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/w1.jpg" alt="" class="small">
- <img src="images/w.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/z1.jpg" alt="" class="small">
- <img src="images/z.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/h1.jpg" alt="" class="small">
- <img src="images/h.png" alt="" class="big">
- </a>
- </li>
- <li>
- <a href="#">
- <img src="images/t1.jpg" alt="" class="small">
- <img src="images/t.png" alt="" class="big">
- </a>
- </li>
- </ul>
-
- </div>
- </body>
- </html>
然后设置我们的CSS样式:
- /* 初始化 */
- *{
- margin: 0 auto;
- padding: 0;
- }
- img{
- width: 100%;
- height: 100%;
- }
- ul{
- list-style: none;
- }
- /* 大盒子 */
- .bigbox{
- width: 800px;
- /* height: 100px; */
- background-image: url(./images/bg.png);
- padding: 10px;
- margin-top: 10vh;
- overflow: hidden;
- }
- /* 设置每一个li */
- .bigbox ul li{
- position: relative;
- float: left;
- width: 69px;
- height: 69px;
- margin: 10px;
- }
- /* 图片的设置 */
- .big{
- display: none;
- border-radius: 5px;
- width: 224px;
- }
- .small{
- position: absolute;
- top: 0;
- left: 0;
- width: 69px;
- height: 69px;
- border-radius: 5px;
- }
- /* current类名设置 */
- .bigbox ul .current .big{
- display: block;
- }
- .bigbox ul .current .small{
- display: none;
- }
- .bigbox ul .current{
- width: 224px;
- }
最后我们来使用jQuery来实现动画效果的交互(重点):
- $(function(){
- // console.log($(".bigbox>ul li"));
- //获取到li元素,注册一个鼠标经过事件
- $(".bigbox>ul li").mouseenter(function(){
- // console.log(this);
- //为当前经过的这个li创建一个自定义动画效果,在动画效果前加上stop()之前我们讲过
- //是为了停止上一层动画,直接执行当前动画,防止出现动画排队执行的bug
- $(this).stop().animate({
- width: 224
- //当前元素中子代类名为small的元素淡出,其兄弟元素淡入
- //经过当前li,让当前li的小图片淡出,大图片淡入
- }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
- //当前元素的所有li兄弟的元素执行动画
- $(this).siblings("li").stop().animate({
- width: 69
- //经过当前li,让当前li的所有兄弟元素的小图片淡入,大图片淡出
- //指定的子代元素中类名为small的元素淡入,其兄弟元素淡出
- }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
- })
- })
这样我们的手风琴案例就完成了
再次声明:案例原创作者:黑马——pink老师
二度创做者:前端小窝
感谢观看,学习前端,关注小蜗