-
<!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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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=\"/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=\"/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=\"/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=\"/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=\"/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=\"/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=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Desarrollos a medida\" /> </div>
-
</div>
-
</div>
-
</li>
-
</ul>
-
</div>
-
</div>
-
<script type=\"text/javascript\" src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
-
<script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
-
<script>
-
$(function(){
-
$(\'a[data-fade]\').click(function(e){
-
$(\'\').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
-
});
-
$(\'\').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: \'Next\',
-
buttonPrevHTML: \'Previous\',
-
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>
-
<!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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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(\'/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=\"/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=\"/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=\"/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=\"/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=\"/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=\"/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=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Desarrollos a medida\" /> </div>
-
</div>
-
</div>
-
</li>
-
</ul>
-
</div>
-
</div>
-
<script type=\"text/javascript\" src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
-
<script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
-
<script>
-
$(function(){
-
$(\'a[data-fade]\').click(function(e){
-
$(\'\').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
-
});
-
$(\'\').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: \'Next\',
-
buttonPrevHTML: \'Previous\',
-
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>
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29737856/viewspace-1210349/
,如需转载,请注明出处,否则将追究法律责任。