介绍 & lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title>手风琴& lt;/title>
,,,& lt; link rel=皊tylesheet", https://www.yisu.com/zixun/href=" . ./animate.css ">
- ->
& lt; script>
,,,$ (function (), {
,,,,,,(“li") .mouseenter(美元function (), {
,,,,,,,,,,//停止()阻止动画效果
,,,,,,,,,,(这)美元鸡毛蒜皮().animate({宽度:“700 px"}, 1000年,“linear") .fadeIn ();
,,,,,,,,,,(这).siblings美元(“li")鸡毛蒜皮().animate({宽度:“100 px"}, 1000年,“linear") .fadeIn ();
,,,,,,,,,,(“.bg") .eq美元($(这).index ()) .siblings (“.bg")鸡毛蒜皮().fadeOut ();
,,,,,,,,,,(“.bg") .eq美元($(这).index())鸡毛蒜皮().animate ({:“700 px"}, 400年,“linear") .fadeIn ();
,,,,,,}),,
,,,});
& lt;/script> * {
,,,保证金:,0;
,,,填充:,0;
}
html、身体,.bg {
,,,身高:,700 px;
,,,宽度:,1400 px;
,,,溢出:,隐藏;
}
身体{
,,,位置:,相对;
}
.bg {
,,,显示:,没有;
}
.bg: nth-child (1) {
,,,背景:url(“. ./图片/1. jpg") no-repeat 中心/覆盖;
}
.bg: nth-child (2) {
,,,背景:url(“. ./图片/2. jpg") no-repeat 中心/覆盖;
}
.bg: nth-child (3) {
,,,背景:url(“. ./图片/3. jpg") no-repeat 中心/覆盖;
}
.bg: nth-child (4) {
,,,背景:url(“. ./图片/4. jpg") no-repeat 中心/覆盖;
}/*大背景显示*/.bg-active {
,,,显示:,块;
}
.main {
,,,位置:,绝对;
,,,宽度:,1000 px;
,,,身高:,400 px;
,,,/*背景颜色:粉红色;*/,,,左:,0;
,,,:,0;
,,,右:,0;
,,,底部:,0;
,,,保证金:,汽车;
}
.main ul {
,,,list-style:,没有;
}
李.main ul {
,,,:浮动,离开;
,,,宽度:,100 px;
,,,身高:,400 px;
,,,的转变:right 1 s;
}/*小背景显示*/.main ul li.li-active {
,,,宽度:,700 px;
,,,身高:,400 px;
}
.main ul 李:nth-child (1) {
,,,,背景:,url(“. ./图片/1. jpg") no-repeat 中心/覆盖;
,}
.main ul 李:nth-child (2) {
,,,背景:,url(“. ./图片/2. jpg") no-repeat 中心/覆盖;
}
.main ul 李:nth-child (3) {
,,,背景:,url(“. ./图片/3. jpg") no-repeat 中心/覆盖;
}
.main ul 李:nth-child (4) {
,,,背景:,url(“. ./图片/4. jpg") no-repeat 中心/覆盖;
}
.main ul li div {
,,,身高:,400 px;
,,,宽度:,100 px;
background - color,,,:, rgba (0, 0, 0, 0。5);
}
.main ul li div p {
,,,颜色:,# fff;
,,,填充:,40像素;
,,,字体大小:,20 px;
,,,不透明度:,0.5;
}
本篇文章为大家展示了使用jQuery怎么实现一个手风琴效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
1。运用jQuery,动画样式进行轮播图切换
2。前提,需要引入动画。css(官网下载就有)
HTML代码:
-
<李>
穿越火线
王者荣耀
使命召唤
英雄联盟
脚本代码:
css代码:
上述内容就是使用jQuery怎么实现一个手风琴效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
