这是一款效果非常不错的jQuery和css3精美的手风琴效果插件。
HTML结构
html结构使用一个无序列表做为手风琴结构。
<ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading">Heading</div> <div class="bgDescription"></div> <div class="description"> <h2>Heading</h2> <p>Some descriptive text</p> <a href="#">more ?</a> </div> </li> </ul>
其他的手风琴项将使用class bg2, bg3 和 bg4。无序列表给定一个class和一个id用于使用javascript控制手风琴。
CSS样式
列表的css样式如下:
ul.accordion{ list-style:none; position:absolute; right:80px; top:0px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; }
每一个列表元素都有不同的背景图片:
ul.accordion li{ float:right; width:115px; height:480px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.accordion li.bg1{ background-image:url(../images/1.jpg); } ul.accordion li.bg2{ background-image:url(../images/2.jpg); } ul.accordion li.bg3{ background-image:url(../images/3.jpg); } ul.accordion li.bg4{ background-image:url(../images/4.jpg); }
注意:阴影效果在IE上将不起作用。
开始时每个列表项的宽度为115像素,我们将使用javascript将它放大到480像素。
JAVASCRIPT
在页面中引入jQuery文件:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
现在,我们要在鼠标滑过手风琴菜单项时添加一个函数,使其能滑动显示,列表项的宽度为480像素。接着顶部标题消失,底部出现渐变,然后描述信息出现:
第一个函数$(‘#accordion > li’).hover当鼠标滑过菜单项元素时被触发,第二个函数则是鼠标离开时被触发。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!