jQuery实现带动画效果的手风琴展开层、关闭层特效

时间：2014-03-09 22:31 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery动画效果的手风琴特效</title>
<style>
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
.ui-selectmenu-menu { padding:0; margin:0; list-style:none; position:absolute; top: 0; display: none; overflow: auto; z-index: 1005;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-open { display: block; }
.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu-dropdown { }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; border-right-width: 0 !important; border-left-width: 0 !important; font-weight: normal !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
.ui-selectmenu-menu li.ui-state-disabled a { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-open li.ui-selectmenu-item-focus a { }
.ui-selectmenu-open li.ui-selectmenu-item-selected { }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-content { }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
/* IE6 workaround (dotted transparent borders) */
* html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
* html .ui-selectmenu-menu li a { position: relative }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
body {
	background: url('http://www.codefans.net/jscss/demoimg/201402/main_bg.jpg') no-repeat top center #b3b3b3;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#loading-mask {
	background: #fff;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99999;
}
#loading-mask.hidden { display: none; }
.wrapper {
	margin: auto;
	position: relative;
	width: 960px;
}
.site-header {
	height: 159px;
	margin: auto;
	overflow: hidden;
	width: 960px;
}
.site-logo {
	float: left;
	margin-top: 6px;
}
.site-nav {
	float: right;
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 15px;
	margin-top: 42px;
	overflow: hidden;
	text-transform: uppercase;
}
.site-nav li {
	float: left;
	margin-right: 11px;
	position: relative;
	width: 78px;
}
.site-nav li.services { width: 99px; }
.site-nav li.products { width: 124px; }
.site-nav li.contact { width: 101px; }
.site-nav a {
	color: #1ba7da;
	display: block;
	padding-bottom: 8px;
	padding-top: 12px;
	position: relative;
	text-align: center;
	text-decoration: none;
	z-index: 200;
}
.site-nav .hover { margin-top: 10px; }
.site-nav .active a, .site-nav .hover a { color: #fff; }
.site-nav span {
	background: url('http://www.codefans.net/jscss/demoimg/201402/nav_sprite.png') no-repeat 0 0 transparent;
	display: none;
	height: 35px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}
.site-nav .active span {
	display: block;
}
.site-nav .home span { background-position: 0 -43px; }
.site-nav .home.active span { background-position: 0 0; }
.site-nav .services span { background-position: -91px -43px; }
.site-nav .services.active span { background-position: -91px 0; }
.site-nav .products span { background-position: -203px -43px; }
.site-nav .products.active span { background-position: -203px 0; }
.site-nav .contact span { background-position: -340px -43px; }
.site-nav .contact.active span { background-position: -340px 0; }
.site-content-bottom {
	background: url('http://www.codefans.net/jscss/demoimg/201402/bottom_info_bg.png') no-repeat center top transparent;
	height: 301px;
	margin-top: -84px;
	position: relative;
	z-index: 300;
}
body.home .site-content-bottom { margin-top: -116px; }
.clients-block {
	float: left;
	margin-left: 10px;
	margin-top: 128px;
}
.clients-block h1 {
	color: #fff;
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-transform: uppercase;
}
.clients-list {
	list-style: none;
	margin-top: 20px;
}
.clients-list li {
	float: left;
	margin-right: 10px;
}
.promo-block {
	background: url('http://www.codefans.net/jscss/demoimg/201402/promo_bg.png') no-repeat bottom left transparent;
	float: left;
	height: 201px;
	margin-left: 10px;
	margin-top: 54px;
	padding-left: 34px;
	position: relative;
	width: 391px;
}
.promo-block h1 {
	color: #313131;
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-size: 15px;
	margin-top: 74px;
	text-transform: uppercase;
}
.promo-block p {
	color: #c5f1ff;
	font-size: 12px;
	margin: 8px 0;
	width: 248px;
}
.promo-block p.important {
	color: #fff;
	font-size: 11px;
	margin-top: 0;
}
.promo-block a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.promo-block img {
	position: absolute;
	right: -14px;
	top: 0;
}
/*=== Content ===*/
.content-title {
	color: #fff;
	font-family: 'Ubuntu', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 34px;
	left: 550px; 
	position: absolute;
	top: 30px;
}
.select-wrapper {
	background: url('http://www.codefans.net/jscss/demoimg/201402/select_bg.png') no-repeat 0 0 transparent;
	float: left;
	height: 69px;
	width: 226px;
}
select { width: 198px; z-index: 999; }
.select-wrapper.wide {
	background: url('http://www.codefans.net/jscss/demoimg/201402/select_bg_wide.png');
	width: 290px;
}
.select-wrapper.wide select { width: 262px; }
/*=== Home ===*/
body.home .site-header {
	position: relative;
	z-index: 200;
}
body.home .site-content {
	margin-top: -63px;
	position: relative;
	z-index: 100;
}
.plusSlider {
	height: 530px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 1185px;
}
#home-slider {
	left: 0;
	height: 530px;
	position: relative;
	width: 1185px;
	z-index: 100;
}
#home-slider .child {
	display: none;
	height: 530px;
	left: 0;
	position: absolute;
	top: 0;
	width: 1185px;
}
#home-slider h2 {
	color: #fff;
	font-family: 'Ubuntu', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 34px;
}
#home-slider h3 {
	color: #fff;
	font-family: 'Ubuntu', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
}
#home-slider h4 {
	color: #2c2c2c;
	font-family: 'Ubuntu', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 15px;
	margin-bottom: 2px;
	text-transform: uppercase;
}
#home-slider h4 span { color: #10b0e6; }
#home-slider p {
	color: #696969;
	line-height: 16px;
}
#home-slider p a {
	color: #07a3d7;
	font-weight: 700;
	text-decoration: none;
}
#home-slider p a span { color: #474747; }
#home-slider .slider-item-header, #home-slider .slider-item-content {
	position: absolute;
	z-index: 200;
}
#home-slider .slider-item-header {
	left: 200px;
	padding-top: 35px;
	top: 162px;
}
#home-slider .slider-item-content {
	left: 280px;
	top: 316px;
	width: 330px;
}
#home-slider .slider-item-image {
	left: 0;
	position: absolute;
	top: 0;
	z-index: 100;
}
.plusSlider.home-slider .arrow {
	position: absolute;
	top: 0;
	z-index: 200;
}
.plusSlider.home-slider .arrow.prev { left: 110px; }
.plusSlider.home-slider .arrow.next { right: 110px; }
/*=== Products ===*/
.site-content.products .wrapper {
	background: url('http://www.codefans.net/jscss/demoimg/201402/content_bg_products.png') no-repeat top right transparent;
	height: 579px;
}
.products-filter {
	float: left;
	margin-left: 16px;
	margin-top: 16px;
}
.products-filter p {
	color: #2b2b2b;
	float: left;
	line-height: 69px;
}
.jcarousel-container {
	float: left;
	clear: left;
	height: 390px;
	margin-top: 42px;
	width: 960px;
}
.jcarousel-clip {
	overflow: hidden;
	margin: 0 72px;
	width: 816px;
}
.jcarousel-prev, .jcarousel-next, .plusSlider .arrow {
	cursor: pointer;
	height: 70px;
	position: absolute;
	text-indent: -2000em;
	top: 56px;
	width: 54px;
}
.jcarousel-prev-disabled, .jcarousel-next-disabled {
	opacity: 0.5;
	cursor: default;
}
.jcarousel-prev, .plusSlider .arrow.prev { left: 0; }
.jcarousel-next, .plusSlider .arrow.next {
	height: 92px;
	right: 0;
	width: 72px;
}
.plusSlider .arrow.next {
	right: 110px;
	top: 162px;
}
.jcarousel-prev span, .jcarousel-next span, .plusSlider .arrow span {
	background: url('http://www.codefans.net/jscss/demoimg/201402/products_arrows.png') no-repeat 0 0 transparent;
	display: block;
	height: 70px;
	left: 0;
	position: absolute;
	top: 0;
	width: 54px;
}
.jcarousel-prev { top: 66px; }
.plusSlider .arrow.prev { top: 174px; } 
.jcarousel-prev span, .plusSlider .arrow.prev span { background-position: 0 -10px; }
.jcarousel-next span, .plusSlider .arrow.next span {
	background-position: -55px 0;
	height: 92px;
	width: 72px;
}
.products-category {
	clear: both;
}
.product-choose .products-category {
	left: 18px;
	position: absolute;
	top: 288px;
	width: 185px;
}
.products-category li {
	background: url('http://www.codefans.net/jscss/demoimg/201402/product_shadow.png') no-repeat bottom center transparent;
	margin-right: 25px;
	padding-bottom: 52px;
	position: relative;
	width: 185px;
}
.product-choose .products-category li {
	left: 0;
	position: absolute;
	top: 0;
}
.product-image-wrapper { height: 179px; }
.product-image-wrapper img {
	border: 1px solid #fff;
	position: relative;
	z-index: 400;
}
.product-image-hover {
	background: url('http://www.codefans.net/jscss/demoimg/201402/product_hover.png') no-repeat 0 0 transparent;
	cursor: pointer;
	display: none;
	height: 179px;
	left: 0;
	position: absolute;
	top: 0;
	width: 185px;
	z-index: 500;
}
.product-info-wrapper {
	background: url('http://www.codefans.net/jscss/demoimg/201402/product_info_bg.png') no-repeat bottom center transparent;
	padding-bottom: 11px;
	position: relative;
	z-index: 400;
}
.product-info {
	background: #06b7ea;
	height: 8px;
	overflow: hidden;
	padding: 10px;
}
.product-info .product-name {
	color: #fff;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.product-info p {
	color: #caf2ff;
	margin: 6px 0;
}
.product-info p strong {
	color: #fff;
}
.product-info p a {
	color: #fff;
}
.product-info-icon {
	background: url('http://www.codefans.net/jscss/demoimg/201402/product_info_icon.png') no-repeat 0 0 transparent;
	cursor: pointer;
	bottom: 30px;
	height: 45px;
	position: absolute;
	right: 7px;
	width: 50px;
	z-index: 300;
}
.product-info-icon.active { background-position: -53px 0; }
/*=== Services ===*/
body.services { background-image: url('http://www.codefans.net/jscss/demoimg/201402/services_bg.jpg'); }
.site-content.services .wrapper {
	height: 870px;
}
.services-list {
	float: left;
	margin-top: 118px;
	width: 638px;
}
.services-list li {
	list-style: none;
	margin-bottom: 4px;
}
.services-list h2 {
	cursor: pointer;
	position: relative;
}
.services-list h2 a {
	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ffffff)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #ebebeb, #ffffff); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #ebebeb, #ffffff); /* IE10 */
	background-image:      -o-linear-gradient(top, #ebebeb, #ffffff); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #ebebeb, #ffffff);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ebebeb', EndColorStr='#ffffff'); /* IE6-IE9 */
	border-color: #fff;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	color: #10b0e6;
	display: block;
	line-height: 66px;
	padding-left: 20px;
	position: relative;
	text-decoration: none;
	width: 578px;
	z-index: 300;
}
.services h2 span {
	background: url('http://www.codefans.net/jscss/demoimg/201402/service_status.png') no-repeat 0 0 transparent;
	height: 49px;
	left: 600px;
	position: absolute;
	top: 8px;
	width: 39px;
	z-index: 200;
}
.services h2 span.active { background-position: 0 -50px; }
.service-content {
	background: #fff;
	border-color: #fff;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	color: #939393;
	line-height: 16px;
	overflow: hidden;
	width: 598px;
}
.service-info-text {
	float: left;
	margin-left: 20px;
	text-align: justify;
	width: 400px;
}
.service-info-image {
	float: right;
	margin-right: 20px;
}
/*=== Contact ===*/
.site-content.contact .wrapper {
	background: url('http://www.codefans.net/jscss/demoimg/201402/content_bg_contact.png') no-repeat right top transparent;
	height: 692px;
}
.site-content.contact .content-title { left: 680px; }
.contact-form {
	float: left;
	margin-top: 50px;
	overflow: hidden;
	width: 682px;
}
.contact-form .choose-title {
	clear: both;
	color: #8b8b8b;
	float: left;
	margin-bottom: 10px;
	margin-left: 18px;
	margin-top: 46px;
	width: 190px;
}
.contact-form .product-choose {
	background: url('http://www.codefans.net/jscss/demoimg/201402/deco_arrow.png') no-repeat 24px 160px transparent;
	float: left;
	min-height: 500px;
	width: 230px;
}
.contact-form .product-choose .side-title {
	color: #2b2b2b;
	float: left;
	font-weight: 700;
	padding: 0 14px;
	margin-bottom: 16px;
	margin-top: 10px;
}
.contact-form .product-choose .select-wrapper.product {
	margin-top: -14px;
}
.contact-form .products-category, .contact-form .products-item {
	list-style: none;
}
.contact-form .fields-data {
	border-left: 1px dotted #5f5f5f;
	padding-left: 30px;
}
.contact-form .fields-data .contact-info {
	color: #8b8b8b;
	line-height: 18px;
	margin-bottom: 20px;
	width: 388px;
}
.contact-form .fields-data .contact-info a {
	color: #06b7ea;
	font-weight: 700;
	text-decoration: none;
}
.contact-form .input.text {
	height: 69px;
	margin-top: -12px;
	overflow: hidden;
}
.contact-form label {
	color: #8b8b8b;
	float: left;
	font-size: 11px;
	line-height: 69px;
	padding-left: 48px;
	width: 69px;
}
.contact-form .required { color: #2e98d8; }
.contact-form input[type=text] {
	background: url('http://www.codefans.net/jscss/demoimg/201402/input_text.png') no-repeat 0 0 transparent;
	border: 0;
	color: #8B8B8B;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 0 30px;
	height: 69px;
	outline: 0;
	width: 230px;
}
.contact-form .textarea {
	background: url('http://www.codefans.net/jscss/demoimg/201402/textarea.png') no-repeat 117px 0 transparent;
	height: 119px;
	margin-top: -12px;
}
.contact-form textarea {
	background: transparent;
	border: none;
	color: #8B8B8B;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 70px;
	margin-left: 14px;
	margin-top: 13px;
	outline: 0;
	padding: 10px;
	resize: none;
	width: 240px;
}
.contact-form .select { margin-top: -12px; }
.contact-form .submit {
	float: right;
	padding-right: 14px;
	width: 230px;
}
.contact-form .submit input {
	background: url('http://www.codefans.net/jscss/demoimg/201402/submit.png') no-repeat 0 0 transparent;
	border: 0;
	color: #fff;
	font-family: 'Ubuntu', Tahoma, Arial, Helvetica, sans-serif;
	font-size: 20px;
	height: 58px;
	outline: 0;
	padding-left: 50px;
	text-align: left;
	text-transform: uppercase;
	width: 216px;
}
.contact-form .required-text {
	color: #8b8b8b;
	font-size: 11px;
	padding-top: 5px;
}
.map-wrapper {
	float: right;
	position: absolute;
	right: 9px;
	top: 145px;
	width: 242px;
}
.map-wrapper #map {
	border: 1px solid #a4a5a5;
	height: 274px;
	width: 240px;
}
.map-mask {
	background: url('http://www.codefans.net/jscss/demoimg/201402/map_mask.png') no-repeat 0 0 transparent;
	height: 44px;
	left: 0;
	position: absolute;
	top: 232px;
	width: 47px;
}
.map-launcher {
	color: #fff;
	float: right;
	font-size: 11px;
	font-weight: 700;
	padding: 8px 0;
	text-decoration: none;
}
.map-launcher span { color: #06b7ea; }
/*=== Footer ===*/
.site-footer {
	background: url('http://www.codefans.net/jscss/demoimg/201402/footer_bg.jpg') repeat-x top center transparent;
	border-top: 1px solid #4f4f4f;
	height: 55px;
	line-height: 50px;
}
.site-footer p, .site-footer address {
	color: #939393;
	float: left;
	font-size: 11px;
	font-style: normal;
	margin-right: 2px;
}
.site-footer p a {
	color: #06b7ea;
	text-decoration: none;
}
.footer-links {
	color: #939393;
	float: right;
	font-size: 11px;
	list-style: none;
	margin-right: 4px;
}
.footer-links li {
	float: left;
}
.footer-links a {
	color: #939393;
	display: inline-block;
	padding: 0 6px 0 8px;
	text-decoration: none;
}
.footer-links .active a { color: #fff; }
.fb-like {
	float: right;
	margin-top: 4px;
	width: 80px;
}
/* selectmenu */
.ui-selectmenu {
	color: #8f8f8f;
	font-size: 11px;
	height: 41px;
	margin: 14px;
	outline: 0;
}
.ui-selectmenu .ui-selectmenu-status {
	line-height: 41px;
	padding: 0 12px;
}
.ui-selectmenu .ui-selectmenu-icon {
	background: url('http://www.codefans.net/jscss/demoimg/201402/select_icon.jpg') no-repeat 0 0 transparent;
	height: 31px;
	margin-top: -16px;
	width: 31px;
}
.ui-selectmenu.ui-state-active .ui-selectmenu-icon { background-position: -31px 0; }
.ui-selectmenu-menu {
	background: #fff;
	padding: 0 4px;
}
.ui-selectmenu-menu a {
	border-top: 1px solid #f0f0f0;
	color: #8f8f8f;
	font-size: 11px;
	padding: 8px;
}
.form-message {
	font-weight: 700;
	margin-bottom: 10px;
	margin-top: -10px;
}
.form-message.error { color: #c00; }
.form-message.success { color: #2686B3; }
</style>
</head>
<body>
<div class="site-content services">
  <div class="wrapper">
    <ul class="services-list">
      <li>
        <h2> <a href="#" title="">CSS3+PIE圆角插件实现超酷的导航菜单和按钮</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此作品是一款可以帮助网友们美化菜单和按钮，跟丑陋的、传统的菜单和按钮说88，默认整理了4种主题颜色，网友们可以自己无限添加哦，主要用了CSS3+PIE圆角插件实现，这样就可以兼容所有浏览器啦，菜单和按钮的长度都是自适应。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Monitoreo" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title=""><strong>带动画全屏图文切换+键盘控制的Jquery焦点图</strong></a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery特效是一款效果非常酷的图片轮播，它包括了以下功能<br />1、带动画效果<br />2、全屏轮播<br />3、轮播内容由图文切换<br />4、键盘左右方向键控制左右滚动<br />5、背景跟随切换<br />6、自动播放。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Alarmas y cámaras" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">网友康松分享仿Win8布局+lightbox弹出层插件显示页面</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此作品是仿Win8布局+lightbox弹出层Jquery插件实现的，它把整个网站的功能都在这个布局里面展示，点击的时候以弹出层的方式来显示页面，这样就可以减少了繁琐的跳转页面操作，提高了用户体验，是一种最近比较流行的网页布局，网友们好好利用哦。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Protección perimetral" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">一款带3D效果带略缩图的幻灯片Jquery插件</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery插件一款带3D效果带略缩图的幻灯片效果，功能非常强大，默认带有3种皮肤，用法也很简单，可以灵活设置6个参数，1、skin：皮肤目录设置，包括3个（cool，crazy，simple）2、numberOfThumbsPerScreen：略缩图的滚动个数，默认为7个。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Consorcios" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">网友Kevin分享原创图片滚动Jquery插件kevinScroll</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>首先非常感谢网友Kevin的无私分享，此Jquery插件实现图片滚动功能，这是他写的一款原创作品，插件命名为kevinScroll，现在分享的是V1.0版本，还在不断完善中，插件功能非常强大，可以灵活设置7个参数，页面上可以多次调用都不起冲突。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Protección de personas" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">一款国外的四图轮播幻灯片Jquery插件</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此Jquery插件是一款国外的四图轮播幻灯片，功能不是很复杂，非常实用，图片使用跟平时的焦点图的用法有点不同，它的图片不放到主体里面，通通都作为背景图片使用，主体就用文字来描述，包含了图片播放、图片滑动、图片左右轮播。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Auditorías" /> </div>
          </div>
        </div>
      </li>
      <li>
        <h2> <a href="#" title="">原生js实现3维图片里外转动放大缩小特效</a> </h2>
        <div>
          <div class="service-content">
            <div class="service-info-text">
              <p>此js特效实现3维图片里外转动放大缩小功能，是一款效果非常酷的作品，作为图片轮播特效来讲，它算比较新有创意的啦，包含了图片滚动、图片放大、图片缩小、鼠标悬浮事件等功能。。。</p>
            </div>
            <div class="service-info-image"> <img src="http://www.codefans.net/jscss/demoimg/201402/service-07.jpg" alt="Desarrollos a medida" /> </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script src="http://www.codefans.net/ajaxjs/jquery-ui-1.8.20.min.js"></script>
<script>
$(function(){
	$('a[data-fade]').click(function(e){
		$('<div id="loading-mask" class="hidden"></div>').prependTo('body').fadeIn(function(){
			return true;
		});
	})
	if ($('.select-wrapper').size () > 0) {
		$('.select-wrapper:not(.wide) select').selectmenu({
			transferClasses: true,
			menuWidth: 154
		});
		$('.select-wrapper.wide select').selectmenu({
			transferClasses: true,
			menuWidth: 214
		});
	}
	$('.site-nav li:not(.active)').hover(function(){
		$(this).children('span').stop(true, true).fadeIn();
		$(this).children('a').stop(true, true).animate({ color: '#fff' });
	}, function(){
		$(this).children('span').stop(true, true).fadeOut();
		$(this).children('a').stop(true, true).animate({ color: '#1ba7da' });
	});
	if ($('#home-slider').size() > 0) {
		$('#home-slider').plusSlider({
			autoPlay: true,
			displayTime: 4000,
			createPagination: false,
			keyboardNavigation: false,
			sliderType: 'fader',
			pauseOnHover: false
		});
		$('<span></span>').appendTo('.plusSlider .arrow');
	}
	$('.jcarousel-prev, .plusSlider .arrow.prev').hover(function(){
		if($(this).attr('disabled') != 'disabled') {
			$(this).children().stop(true, true).animate({'left' : -10});
		}
	}, function(){
		$(this).children().stop(true, true).animate({'left' : 0});
	});
	$('.jcarousel-next, .plusSlider .arrow.next').hover(function(){
		if($(this).attr('disabled') != 'disabled') {
			$(this).children().stop(true, true).animate({'left' : 10});
		}
	}, function(){
		$(this).children().stop(true, true).animate({'left' : 0});
	});
	if ($('.products-category:not(.single)').size() > 0) {
		$('.products-category').jcarousel({
			buttonNextHTML: '<a><span>Next</span></a>',
			buttonPrevHTML: '<a><span>Previous</span></a>',
			scroll: 4
		});
		optionIndex = $('select.products-categories option:selected').index();
		$('.jcarousel-container:eq(' + optionIndex + ')').addClass('active');
		$('.jcarousel-container:not(.active)').hide();
		$('select.products-categories').change(function(){
			optionIndex = $(this).children(':selected').index();
			$('.jcarousel-container.active').fadeOut(function(){
				$(this).removeClass('active');
				$('.jcarousel-container:eq(' + optionIndex + ')').fadeIn(function(){
					$(this).addClass('active');
				});
			});
		});
	}
	$('.products-item').mouseenter(function(){
		$item = $(this);
		$item.find('.product-image-hover').stop(true, true).fadeIn();
	}).mouseleave(function(){
		$item = $(this);
		$item.find('.product-image-hover').stop(true, true).fadeOut();
	});
	$('.products-item').find('.product-info-icon, .product-image-hover').click(function(){
		$container = $(this).closest('.products-item');
		$icon = $container.find('.product-info-icon');
		if(!$icon.hasClass('active')) {
			$icon.stop(true, true).animate({ 'bottom' : 62 }).addClass('active').animate({ 'bottom' : 24 });
			if ($container.parent().hasClass('single')) {
				contentHeight = 72;
			} else {
				contentHeight = 106;
			}
			$container.find('.product-info-wrapper').children('.product-info').stop(true, true).animate({ 'height' : contentHeight });
		} else {
			if ($(this).hasClass('product-info-icon')) {
				$icon.stop(true, true).animate({ 'bottom' : 62 }).removeClass('active').animate({ 'bottom' : 30 });
				$container.find('.product-info-wrapper').children('.product-info').stop(true, true).animate({ 'height' : 8 });
			}
		}
	});
	$('.select-product').click(function(e){
		$product = $(this).closest('.products-item');
		$.cookie('selected_category', $('.selectmenu.products-categories').val(), '/');
		$.cookie('selected_product', $product.data('product-id'), '/');
	});
	if ($('.services-list').size() > 0) {
		$('.services-list').accordion({
			autoHeight: false,
			create: function (event, ui) {
				$('.services-list li:first h2 span').addClass('active');
			},
			changestart: function (event, ui) {
				ui.oldHeader.children('span').animate({ 'left' : 561 }, function () {
					$(this).removeClass('active').animate({ 'left' : 600 });
				});
				ui.newHeader.children('span').stop(true, true).animate({ 'left' : 561 }, function () {
					$(this).addClass('active').animate({ 'left' : 600 });
				});
				return true;
			},
			change: function (event, ui) {
				return true;
			}
		});
	}
	if ($('#map').size() > 0) {
		mapInit();
	}
	$('.contact-form .select-wrapper.product, .contact-form .products-category, .contact-form .products-item').hide();
	toggleProductCategory(true);
	$('select.products-category-selector').change(function(){
		toggleProductCategory(false);
	});
	$('select.products-item-selector').change(function(){
		toggleProductItem();
	});
	$('#loading-mask').fadeOut('slow', function(){
		$(this).remove();
	});
});
function toggleProductCategory (onload) {
	categorySelectedIndex = $('select.products-category-selector :selected').index();
	$('.select-wrapper.product.active').hide().removeClass('active');
	$('.select-wrapper.product:eq(' + categorySelectedIndex + ')').show().addClass('active');
	$('.products-category.active').fadeOut().removeClass('active').children('li.active').fadeOut().removeClass('active');
	$('.products-category:eq(' + (categorySelectedIndex - 1) + ')').fadeIn(function(){
		$(this).addClass('active');
		toggleProductItem();
	});
	return true;
}
function toggleProductItem (onload) {
	categorySelectedIndex = $('.products-category-selector :selected').index();
	productSelectedIndex = $('.select-wrapper.product.active select :selected').index();
	if (productSelectedIndex > 0) {
		$('.products-category.active .products-item.active').fadeOut().removeClass('active');
		$('.products-category.active .products-item:eq(' + (productSelectedIndex - 1) + ')').fadeIn().addClass('active');
	}
}
function mapInit () {
	var latlng = new google.maps.LatLng(-34.462737, -58.524939);
	var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map"), myOptions);
	var image = 'img/map_marker.png';
	var beachMarker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: image
	});
}
</script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

jQuery实现带动画效果的手风琴展开层、关闭层特效

网页特效