web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
jQuery和css3精美的手风琴效果插件
分类:
导航菜单
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
##### HTML结构 ------------ html结构使用一个无序列表做为手风琴结构。 ```html
Heading
Heading
Some descriptive text
more ?
``` 其他的手风琴项将使用class bg2, bg3 和 bg4。无序列表给定一个class和一个id用于使用javascript控制手风琴。 ##### CSS样式 列表的css样式如下: ```html 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; } ``` 每一个列表元素都有不同的背景图片: ```html 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文件: ```html ``` 现在,我们要在鼠标滑过手风琴菜单项时添加一个函数,使其能滑动显示,列表项的宽度为480像素。接着顶部标题消失,底部出现渐变,然后描述信息出现: ```html ``` 第一个函数$(‘#accordion > li’).hover当鼠标滑过菜单项元素时被触发,第二个函数则是鼠标离开时被触发。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告