|
[tr][td] 手风琴效果常用于切换显示一组内容，这种方式既可以节省网页空间又可以有动画效果。今天，我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 CSS3 属性来提升外观。
图片：100156zb9j7w6y9i47p77s.png  效果演示 插件下载 HTML示例代码： [*] [*] [*] [*] [*] [*] Heading [*] [*] [*] [*] [*] [*] Heading [*] [*] Some descriptive text [*] [*] more ? [*] [*] [*] [*] [*] [*] 复制代码 CSS示例代码： [*]ul.accordion li .description h2{ [*] [*] text-transform:uppercase; [*] [*] font-style:normal; [*] [*] font-weight:bold; [*] [*] letter-spacing:1px; [*] [*] font-size:45px; [*] [*] color:#444; [*] [*] text-align:left; [*] [*] margin:0px 0px 15px 20px; [*] [*] text-shadow:-1px -1px 1px #ccc; [*] [*]} [*] [*]ul.accordion li .description p{ [*] [*] line-height:14px; [*] [*] margin:10px 22px; [*] [*] font-family: "Trebuchet MS", sans-serif; [*] [*] font-size: 12px; [*] [*] font-style: italic; [*] [*] font-weight: normal; [*] [*] text-transform: none; [*] [*] letter-spacing: normal; [*] [*] line-height: 1.6em; [*] [*]} [*] [*]ul.accordion li .description a{ [*] [*] position:absolute; [*] [*] bottom:5px; [*] [*] left:20px; [*] [*] text-transform:uppercase; [*] [*] font-style:normal; [*] [*] font-size:11px; [*] [*] text-decoration:none; [*] [*] color:#888; [*] [*]} [*] [*]ul.accordion li .description a:hover{ [*] [*] color:#333; [*] [*] text-decoration:underline; [*] [*]} 复制代码 JavaScript代码： [*]$(function() { [*] [*] $('#accordion > li').hover( [*] [*] function () { [*] [*] var $this = $(this); [*] [*] $this.stop().animate({'width':'480px'},500); [*] [*] $('.heading',$this).stop(true,true).fadeOut(); [*] [*] $('.bgDescription',$this).stop(true,true).slideDown(500); [*] [*] $('.description',$this).stop(true,true).fadeIn(); [*] [*] }, [*] [*] function () { [*] [*] var $this = $(this); [*] [*] $this.stop().animate({'width':'115px'},1000); [*] [*] $('.heading',$this).stop(true,true).fadeIn(); [*] [*] $('.description',$this).stop(true,true).fadeOut(500); [*] [*] $('.bgDescription',$this).stop(true,true).slideUp(700); [*] [*] } [*] [*] ); [*] [*]}); 复制代码 via:http://www.cnblogs.com/lhb25/p/e ... query-and-css3.html [/td][/tr] |
|
