h5 手风琴效果_html+jquery垂直手风琴滑动效果

最新推荐文章于 2021-09-10 16:43:58 发布

echo in

最新推荐文章于 2021-09-10 16:43:58 发布

阅读量168

点赞数

文章标签： h5 手风琴效果

本文链接：https://blog.csdn.net/weixin_34304274/article/details/114172920

版权

这篇博客介绍了如何使用HTML5和jQuery创建垂直手风琴滑动效果。通过CSS样式设置，包括不同切片的背景图片和颜色，以及标题和内容的样式。每个切片可以作为独立的内容区域，点击时实现平滑的展开和关闭效果，为网页添加动态交互体验。

摘要由CSDN通过智能技术生成

书写css代码。

.va-container { position: relative; margin: 40px auto 0 auto; }

.va-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }

.va-slice { cursor: pointer; position: absolute; width: 100%; left: 0px; overflow: hidden; }

.va-slice-1 { background: #000 url(../images/1.jpg) no-repeat center center; }

.va-slice-2 { background: #000 url(../images/2.jpg) no-repeat center center; }

.va-slice-3 { background: #000 url(../images/3.jpg) no-repeat center center; }

.va-slice-4 { background: #000 url(../images/4.jpg) no-repeat center center; }

.va-slice-5 { background: #000 url(../images/5.jpg) no-repeat center center; }

.va-slice-6 { background: #000 url(../images/6.jpg) no-repeat center center; }

.va-slice-7 { background: #000 url(../images/7.jpg) no-repeat center center; }

.va-slice-color-1 { background-color: #97c5eb; }

.va-slice-color-2 { background-color: #68ace5; }

.va-slice-color-3 { background-color: #0072cf; }

.va-slice-color-4 { background-color: #0039a6; }

.va-slice-color-5 { background-color: #00338e; }

.va-slice-color-6 { background-color: #002c76; }

.va-slice-color-7 { background-color: #002144; }

.va-title { font-family: 'Open Sans Condensed', sans-serif; text-transform: uppercase; font-size: 60px; margin-left: 20px; color: #fff; text-shadow: 0px 0px 1px white; }

.va-content { display: none; margin-left: 25px; }

.va-slice p { font-size: 22px; font-style: italic; font-family: Georgia, serif; }

.va-slice ul { margin-top: 20px; }

.va-slice ul li { float: left; margin: 0px 2px; }

.va-slice ul li a { color: #000; background: #eede2f; padding: 3px 6px; font-size: 14px; font-family: 'PT Sans', sans-serif; text-transform: uppercase; }

.va-slice ul li a:hover { background: #000; color: #fff; text-shadow: none; }

.va-nav span { width: 40px; height: 25px; background: transparent url(../images/prev.png) no-repeat center center; position: absolute; top: -35px; left: 50%; margin-left: -20px; text-indent: -9000px; opacity: 0.7; cursor: pointer; display: none; z-index: 100; }

.va-nav span.va-nav-next { background-image: url(../images/next.png); top: auto; bottom: -35px; }

.va-nav span:hover { opacity: 1.0; }