这篇博客介绍了如何使用HTML、CSS和JavaScript实现手风琴、轮播图以及图片滑动的三种经典特效。通过纯CSS实现的手风琴利用了:hover选择器，CSS3手风琴利用了radio单选特性，而JavaScript实现的手风琴则通过定时器和事件处理实现平滑过渡。此外，还展示了基于jQuery的responsiveslides.js插件实现的轮播图效果以及一个简单的图片滑动效果。
最近都没有更，就来几个效果充实一下。
都没有进行美化这步。
纯css的手风琴：
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li{
float: left;
position: relative;
height: 254px;
width: 110px;
overflow: hidden;
transition: all 0.3s;
}
/* 这是css手风琴的核心，就是hover的使用
**首先是ul:hover li这个触发了经过ul但没有经过li的变化
**然后是ul li:hover这里是被经过li的变化，匹配css3动画效果，
和css3的一些对页面美化的效果，就可以做出一个很好看的手风琴，
如果使用纯js实现可能很麻烦。
*/
ul:hover li{
width:22px;
}
ul li:hover{
width: 460px;
}
ul li img{
width: 550px;
height: 254px;
}
ul li span{
width: 22px;
position: absolute;
top: 0;
right: 0;
height: 204px;
padding-top: 50px;
color: #fff;
}
ul li span.bg1{
background: #333;
}
ul li span.bg2{
background: #0f0;
}
ul li span.bg3{
background: #ff7500;
}
ul li span.bg4{
background: #0ff;
}
ul li span.bg5{
background: #00f;
}
- 这是第一个
- 这是第二个
- 这是第三个
- 这是第四个
- 这是第五个
css3手风琴：
/* 使用了radio的单选特性，实现手风琴效果 */
ul{
display: none;
}
input{display: none;}
label{display: block; line-height: 40px; border-bottom: 1px solid #ddd; cursor:pointer; font-size: 15px; font-weight: bold;}
.list > ul{display: none; -webkit-transition:all .5s linear; -moz-transition:all .5s linear; -ms-transition:all .5s linear; -o-transition:all .5s linear; transition:all .5s linear;}
#list1:checked + ul{display: block;}
#list2:checked + ul{display: block;}
#list3:checked + ul{display: block;}
#list4:checked + ul{display: block;}
javascript实现的手风琴：
.showBox{
width: 660px;
overflow: hidden;
}
ul{
list-style: none;
margin: 0;
padding: 0;
width: 30000px;
}
ul li.active{
width: 550px;
最低0.47元/天 解锁文章
扫一扫
2054
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
