ITPub博客

首页 > 应用开发 > Java > jQuery手风琴展开层、关闭层特效

jQuery手风琴展开层、关闭层特效

Java 作者:chunzhisu 时间:2014-07-05 15:43:02 0 删除 编辑

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
  5. <title>jQuery动画效果的手风琴特效</title>
  6. <style>
  7. .ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
  8. .ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
  9. .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 */
  10. .ui-selectmenu-open { display: block; }
  11. .ui-selectmenu-menu-popup { margin-top: -1px; }
  12. .ui-selectmenu-menu-dropdown { }
  13. .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; }
  14. .ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
  15. .ui-selectmenu-menu li.ui-state-disabled a { cursor: default; }
  16. .ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
  17. .ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
  18. .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
  19. .ui-selectmenu-status { line-height: 1.4em; }
  20. .ui-selectmenu-open li.ui-selectmenu-item-focus a { }
  21. .ui-selectmenu-open li.ui-selectmenu-item-selected { }
  22. .ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
  23. .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
  24. .ui-selectmenu-menu li .ui-selectmenu-item-content { }
  25. .ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
  26. /* for optgroups */
  27. .ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
  28. .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
  29. .ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
  30. /* IE6 workaround (dotted transparent borders) */
  31. * html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
  32. * html .ui-selectmenu-menu li a { position: relative }
  33. html, body, div, span, object, iframe,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. abbr, address, cite, code,
  36. del, dfn, em, img, ins, kbd, q, samp,
  37. small, strong, sub, sup, var,
  38. b, i,
  39. dl, dt, dd, ol, ul, li,
  40. fieldset, form, label, legend,
  41. table, caption, tbody, tfoot, thead, tr, th, td,
  42. article, aside, canvas, details, figcaption, figure,
  43. footer, header, hgroup, menu, nav, section, summary,
  44. time, mark, audio, video {
  45.     margin:0;
  46.     padding:0;
  47.     border:0;
  48.     outline:0;
  49.     font-size:100%;
  50.     vertical-align:baseline;
  51.     background:transparent;
  52. }
  53. body {
  54.     line-height:1;
  55. }
  56. article,aside,details,figcaption,figure,
  57. footer,header,hgroup,menu,nav,section {
  58.     display:block;
  59. }
  60. nav ul {
  61.     list-style:none;
  62. }
  63. blockquote, q {
  64.     quotes:none;
  65. }
  66. blockquote:before, blockquote:after,
  67. q:before, q:after {
  68.     content:\'\';
  69.     content:none;
  70. }
  71. a {
  72.     margin:0;
  73.     padding:0;
  74.     font-size:100%;
  75.     vertical-align:baseline;
  76.     background:transparent;
  77. }
  78. ins {
  79.     background-color:#ff9;
  80.     color:#000;
  81.     text-decoration:none;
  82. }
  83. mark {
  84.     background-color:#ff9;
  85.     color:#000;
  86.     font-style:italic;
  87.     font-weight:bold;
  88. }
  89. del {
  90.     text-decoration: line-through;
  91. }
  92. abbr[title], dfn[title] {
  93.     border-bottom:1px dotted;
  94.     cursor:help;
  95. }
  96. table {
  97.     border-collapse:collapse;
  98.     border-spacing:0;
  99. }
  100. hr {
  101.     display:block;
  102.     height:1px;
  103.     border:0;
  104.     border-top:1px solid #cccccc;
  105.     margin:1em 0;
  106.     padding:0;
  107. }
  108. input, select {
  109.     vertical-align:middle;
  110. }
  111. body {
  112.     background: url(\'/jscss/demoimg/201402/main_bg.jpg\') no-repeat top center #b3b3b3;
  113.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  114.     font-size: 12px;
  115. }
  116. #loading-mask {
  117.     background: #fff;
  118.     height: 100%;
  119.     left: 0;
  120.     position: fixed;
  121.     top: 0;
  122.     width: 100%;
  123.     z-index: 99999;
  124. }
  125. #loading-mask.hidden { display: none; }
  126. .wrapper {
  127.     margin: auto;
  128.     position: relative;
  129.     width: 960px;
  130. }
  131. .site-header {
  132.     height: 159px;
  133.     margin: auto;
  134.     overflow: hidden;
  135.     width: 960px;
  136. }
  137. .site-logo {
  138.     float: left;
  139.     margin-top: 6px;
  140. }
  141. .site-nav {
  142.     float: right;
  143.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  144.     font-size: 15px;
  145.     margin-top: 42px;
  146.     overflow: hidden;
  147.     text-transform: uppercase;
  148. }
  149. .site-nav li {
  150.     float: left;
  151.     margin-right: 11px;
  152.     position: relative;
  153.     width: 78px;
  154. }
  155. .site-nav li.services { width: 99px; }
  156. .site-nav li.products { width: 124px; }
  157. .site-nav li.contact { width: 101px; }
  158. .site-nav a {
  159.     color: #1ba7da;
  160.     display: block;
  161.     padding-bottom: 8px;
  162.     padding-top: 12px;
  163.     position: relative;
  164.     text-align: center;
  165.     text-decoration: none;
  166.     z-index: 200;
  167. }
  168. .site-nav .hover { margin-top: 10px; }
  169. .site-nav .active a, .site-nav .hover a { color: #fff; }
  170. .site-nav span {
  171.     background: url(\'/jscss/demoimg/201402/nav_sprite.png\') no-repeat 0 0 transparent;
  172.     display: none;
  173.     height: 35px;
  174.     left: 0;
  175.     position: absolute;
  176.     top: 0;
  177.     width: 100%;
  178.     z-index: 100;
  179. }
  180. .site-nav .active span {
  181.     display: block;
  182. }
  183. .site-nav .home span { background-position: 0 -43px; }
  184. .site-nav .home.active span { background-position: 0 0; }
  185. .site-nav .services span { background-position: -91px -43px; }
  186. .site-nav .services.active span { background-position: -91px 0; }
  187. .site-nav .products span { background-position: -203px -43px; }
  188. .site-nav .products.active span { background-position: -203px 0; }
  189. .site-nav .contact span { background-position: -340px -43px; }
  190. .site-nav .contact.active span { background-position: -340px 0; }
  191. .site-content-bottom {
  192.     background: url(\'/jscss/demoimg/201402/bottom_info_bg.png\') no-repeat center top transparent;
  193.     height: 301px;
  194.     margin-top: -84px;
  195.     position: relative;
  196.     z-index: 300;
  197. }
  198. body.home .site-content-bottom { margin-top: -116px; }
  199. .clients-block {
  200.     float: left;
  201.     margin-left: 10px;
  202.     margin-top: 128px;
  203. }
  204. .clients-block h1 {
  205.     color: #fff;
  206.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  207.     font-size: 15px;
  208.     text-transform: uppercase;
  209. }
  210. .clients-list {
  211.     list-style: none;
  212.     margin-top: 20px;
  213. }
  214. .clients-list li {
  215.     float: left;
  216.     margin-right: 10px;
  217. }
  218. .promo-block {
  219.     background: url(\'/jscss/demoimg/201402/promo_bg.png\') no-repeat bottom left transparent;
  220.     float: left;
  221.     height: 201px;
  222.     margin-left: 10px;
  223.     margin-top: 54px;
  224.     padding-left: 34px;
  225.     position: relative;
  226.     width: 391px;
  227. }
  228. .promo-block h1 {
  229.     color: #313131;
  230.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  231.     font-size: 15px;
  232.     margin-top: 74px;
  233.     text-transform: uppercase;
  234. }
  235. .promo-block p {
  236.     color: #c5f1ff;
  237.     font-size: 12px;
  238.     margin: 8px 0;
  239.     width: 248px;
  240. }
  241. .promo-block p.important {
  242.     color: #fff;
  243.     font-size: 11px;
  244.     margin-top: 0;
  245. }
  246. .promo-block a {
  247.     color: #fff;
  248.     font-weight: 700;
  249.     text-decoration: none;
  250. }
  251. .promo-block img {
  252.     position: absolute;
  253.     right: -14px;
  254.     top: 0;
  255. }
  256. /*=== Content ===*/
  257. .content-title {
  258.     color: #fff;
  259.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  260.     font-size: 34px;
  261.     left: 550px;
  262.     position: absolute;
  263.     top: 30px;
  264. }
  265. .select-wrapper {
  266.     background: url(\'/jscss/demoimg/201402/select_bg.png\') no-repeat 0 0 transparent;
  267.     float: left;
  268.     height: 69px;
  269.     width: 226px;
  270. }
  271. select { width: 198px; z-index: 999; }
  272. .select-wrapper.wide {
  273.     background: url(\'/jscss/demoimg/201402/select_bg_wide.png\');
  274.     width: 290px;
  275. }
  276. .select-wrapper.wide select { width: 262px; }
  277. /*=== Home ===*/
  278. body.home .site-header {
  279.     position: relative;
  280.     z-index: 200;
  281. }
  282. body.home .site-content {
  283.     margin-top: -63px;
  284.     position: relative;
  285.     z-index: 100;
  286. }
  287. .plusSlider {
  288.     height: 530px;
  289.     margin: auto;
  290.     overflow: hidden;
  291.     position: relative;
  292.     width: 1185px;
  293. }
  294. #home-slider {
  295.     left: 0;
  296.     height: 530px;
  297.     position: relative;
  298.     width: 1185px;
  299.     z-index: 100;
  300. }
  301. #home-slider .child {
  302.     display: none;
  303.     height: 530px;
  304.     left: 0;
  305.     position: absolute;
  306.     top: 0;
  307.     width: 1185px;
  308. }
  309. #home-slider h2 {
  310.     color: #fff;
  311.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  312.     font-size: 34px;
  313. }
  314. #home-slider h3 {
  315.     color: #fff;
  316.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  317.     font-size: 15px;
  318.     font-weight: 700;
  319.     text-transform: uppercase;
  320. }
  321. #home-slider h4 {
  322.     color: #2c2c2c;
  323.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  324.     font-size: 15px;
  325.     margin-bottom: 2px;
  326.     text-transform: uppercase;
  327. }
  328. #home-slider h4 span { color: #10b0e6; }
  329. #home-slider p {
  330.     color: #696969;
  331.     line-height: 16px;
  332. }
  333. #home-slider p a {
  334.     color: #07a3d7;
  335.     font-weight: 700;
  336.     text-decoration: none;
  337. }
  338. #home-slider p a span { color: #474747; }
  339. #home-slider .slider-item-header, #home-slider .slider-item-content {
  340.     position: absolute;
  341.     z-index: 200;
  342. }
  343. #home-slider .slider-item-header {
  344.     left: 200px;
  345.     padding-top: 35px;
  346.     top: 162px;
  347. }
  348. #home-slider .slider-item-content {
  349.     left: 280px;
  350.     top: 316px;
  351.     width: 330px;
  352. }
  353. #home-slider .slider-item-image {
  354.     left: 0;
  355.     position: absolute;
  356.     top: 0;
  357.     z-index: 100;
  358. }
  359. .plusSlider.home-slider .arrow {
  360.     position: absolute;
  361.     top: 0;
  362.     z-index: 200;
  363. }
  364. .plusSlider.home-slider .arrow.prev { left: 110px; }
  365. .plusSlider.home-slider .arrow.next { right: 110px; }
  366. /*=== Products ===*/
  367. .site-content.products .wrapper {
  368.     background: url(\'/jscss/demoimg/201402/content_bg_products.png\') no-repeat top right transparent;
  369.     height: 579px;
  370. }
  371. .products-filter {
  372.     float: left;
  373.     margin-left: 16px;
  374.     margin-top: 16px;
  375. }
  376. .products-filter p {
  377.     color: #2b2b2b;
  378.     float: left;
  379.     line-height: 69px;
  380. }
  381. .jcarousel-container {
  382.     float: left;
  383.     clear: left;
  384.     height: 390px;
  385.     margin-top: 42px;
  386.     width: 960px;
  387. }
  388. .jcarousel-clip {
  389.     overflow: hidden;
  390.     margin: 0 72px;
  391.     width: 816px;
  392. }
  393. .jcarousel-prev, .jcarousel-next, .plusSlider .arrow {
  394.     cursor: pointer;
  395.     height: 70px;
  396.     position: absolute;
  397.     text-indent: -2000em;
  398.     top: 56px;
  399.     width: 54px;
  400. }
  401. .jcarousel-prev-disabled, .jcarousel-next-disabled {
  402.     opacity: 0.5;
  403.     cursor: default;
  404. }
  405. .jcarousel-prev, .plusSlider .arrow.prev { left: 0; }
  406. .jcarousel-next, .plusSlider .arrow.next {
  407.     height: 92px;
  408.     right: 0;
  409.     width: 72px;
  410. }
  411. .plusSlider .arrow.next {
  412.     right: 110px;
  413.     top: 162px;
  414. }
  415. .jcarousel-prev span, .jcarousel-next span, .plusSlider .arrow span {
  416.     background: url(\'/jscss/demoimg/201402/products_arrows.png\') no-repeat 0 0 transparent;
  417.     display: block;
  418.     height: 70px;
  419.     left: 0;
  420.     position: absolute;
  421.     top: 0;
  422.     width: 54px;
  423. }
  424. .jcarousel-prev { top: 66px; }
  425. .plusSlider .arrow.prev { top: 174px; }
  426. .jcarousel-prev span, .plusSlider .arrow.prev span { background-position: 0 -10px; }
  427. .jcarousel-next span, .plusSlider .arrow.next span {
  428.     background-position: -55px 0;
  429.     height: 92px;
  430.     width: 72px;
  431. }
  432. .products-category {
  433.     clear: both;
  434. }
  435. .product-choose .products-category {
  436.     left: 18px;
  437.     position: absolute;
  438.     top: 288px;
  439.     width: 185px;
  440. }
  441. .products-category li {
  442.     background: url(\'/jscss/demoimg/201402/product_shadow.png\') no-repeat bottom center transparent;
  443.     margin-right: 25px;
  444.     padding-bottom: 52px;
  445.     position: relative;
  446.     width: 185px;
  447. }
  448. .product-choose .products-category li {
  449.     left: 0;
  450.     position: absolute;
  451.     top: 0;
  452. }
  453. .product-image-wrapper { height: 179px; }
  454. .product-image-wrapper img {
  455.     border: 1px solid #fff;
  456.     position: relative;
  457.     z-index: 400;
  458. }
  459. .product-image-hover {
  460.     background: url(\'/jscss/demoimg/201402/product_hover.png\') no-repeat 0 0 transparent;
  461.     cursor: pointer;
  462.     display: none;
  463.     height: 179px;
  464.     left: 0;
  465.     position: absolute;
  466.     top: 0;
  467.     width: 185px;
  468.     z-index: 500;
  469. }
  470. .product-info-wrapper {
  471.     background: url(\'/jscss/demoimg/201402/product_info_bg.png\') no-repeat bottom center transparent;
  472.     padding-bottom: 11px;
  473.     position: relative;
  474.     z-index: 400;
  475. }
  476. .product-info {
  477.     background: #06b7ea;
  478.     height: 8px;
  479.     overflow: hidden;
  480.     padding: 10px;
  481. }
  482. .product-info .product-name {
  483.     color: #fff;
  484.     margin-bottom: 10px;
  485.     text-transform: uppercase;
  486. }
  487. .product-info p {
  488.     color: #caf2ff;
  489.     margin: 6px 0;
  490. }
  491. .product-info p strong {
  492.     color: #fff;
  493. }
  494. .product-info p a {
  495.     color: #fff;
  496. }
  497. .product-info-icon {
  498.     background: url(\'/jscss/demoimg/201402/product_info_icon.png\') no-repeat 0 0 transparent;
  499.     cursor: pointer;
  500.     bottom: 30px;
  501.     height: 45px;
  502.     position: absolute;
  503.     right: 7px;
  504.     width: 50px;
  505.     z-index: 300;
  506. }
  507. .product-info-icon.active { background-position: -53px 0; }
  508. /*=== Services ===*/
  509. body.services { background-image: url(\'/jscss/demoimg/201402/services_bg.jpg\'); }
  510. .site-content.services .wrapper {
  511.     height: 870px;
  512. }
  513. .services-list {
  514.     float: left;
  515.     margin-top: 118px;
  516.     width: 638px;
  517. }
  518. .services-list li {
  519.     list-style: none;
  520.     margin-bottom: 4px;
  521. }
  522. .services-list h2 {
  523.     cursor: pointer;
  524.     position: relative;
  525. }
  526. .services-list h2 a {
  527.     background-color: #ffffff;
  528.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ffffff)); /* Saf4+, Chrome */
  529.     background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */
  530.     background-image: -moz-linear-gradient(top, #ebebeb, #ffffff); /* FF3.6 */
  531.     background-image: -ms-linear-gradient(top, #ebebeb, #ffffff); /* IE10 */
  532.     background-image: -o-linear-gradient(top, #ebebeb, #ffffff); /* Opera 11.10+ */
  533.     background-image: linear-gradient(top, #ebebeb, #ffffff);
  534.     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=\'#ebebeb\', EndColorStr=\'#ffffff\'); /* IE6-IE9 */
  535.     border-color: #fff;
  536.     border-style: solid;
  537.     border-width: 1px 1px 0 1px;
  538.     color: #10b0e6;
  539.     display: block;
  540.     line-height: 66px;
  541.     padding-left: 20px;
  542.     position: relative;
  543.     text-decoration: none;
  544.     width: 578px;
  545.     z-index: 300;
  546. }
  547. .services h2 span {
  548.     background: url(\'/jscss/demoimg/201402/service_status.png\') no-repeat 0 0 transparent;
  549.     height: 49px;
  550.     left: 600px;
  551.     position: absolute;
  552.     top: 8px;
  553.     width: 39px;
  554.     z-index: 200;
  555. }
  556. .services h2 span.active { background-position: 0 -50px; }
  557. .service-content {
  558.     background: #fff;
  559.     border-color: #fff;
  560.     border-style: solid;
  561.     border-width: 0 1px 1px 1px;
  562.     color: #939393;
  563.     line-height: 16px;
  564.     overflow: hidden;
  565.     width: 598px;
  566. }
  567. .service-info-text {
  568.     float: left;
  569.     margin-left: 20px;
  570.     text-align: justify;
  571.     width: 400px;
  572. }
  573. .service-info-image {
  574.     float: right;
  575.     margin-right: 20px;
  576. }
  577. /*=== Contact ===*/
  578. .site-content.contact .wrapper {
  579.     background: url(\'/jscss/demoimg/201402/content_bg_contact.png\') no-repeat right top transparent;
  580.     height: 692px;
  581. }
  582. .site-content.contact .content-title { left: 680px; }
  583. .contact-form {
  584.     float: left;
  585.     margin-top: 50px;
  586.     overflow: hidden;
  587.     width: 682px;
  588. }
  589. .contact-form .choose-title {
  590.     clear: both;
  591.     color: #8b8b8b;
  592.     float: left;
  593.     margin-bottom: 10px;
  594.     margin-left: 18px;
  595.     margin-top: 46px;
  596.     width: 190px;
  597. }
  598. .contact-form .product-choose {
  599.     background: url(\'/jscss/demoimg/201402/deco_arrow.png\') no-repeat 24px 160px transparent;
  600.     float: left;
  601.     min-height: 500px;
  602.     width: 230px;
  603. }
  604. .contact-form .product-choose .side-title {
  605.     color: #2b2b2b;
  606.     float: left;
  607.     font-weight: 700;
  608.     padding: 0 14px;
  609.     margin-bottom: 16px;
  610.     margin-top: 10px;
  611. }
  612. .contact-form .product-choose .select-wrapper.product {
  613.     margin-top: -14px;
  614. }
  615. .contact-form .products-category, .contact-form .products-item {
  616.     list-style: none;
  617. }
  618. .contact-form .fields-data {
  619.     border-left: 1px dotted #5f5f5f;
  620.     padding-left: 30px;
  621. }
  622. .contact-form .fields-data .contact-info {
  623.     color: #8b8b8b;
  624.     line-height: 18px;
  625.     margin-bottom: 20px;
  626.     width: 388px;
  627. }
  628. .contact-form .fields-data .contact-info a {
  629.     color: #06b7ea;
  630.     font-weight: 700;
  631.     text-decoration: none;
  632. }
  633. .contact-form .input.text {
  634.     height: 69px;
  635.     margin-top: -12px;
  636.     overflow: hidden;
  637. }
  638. .contact-form label {
  639.     color: #8b8b8b;
  640.     float: left;
  641.     font-size: 11px;
  642.     line-height: 69px;
  643.     padding-left: 48px;
  644.     width: 69px;
  645. }
  646. .contact-form .required { color: #2e98d8; }
  647. .contact-form input[type=text] {
  648.     background: url(\'/jscss/demoimg/201402/input_text.png\') no-repeat 0 0 transparent;
  649.     border: 0;
  650.     color: #8B8B8B;
  651.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  652.     font-size: 12px;
  653.     padding: 0 30px;
  654.     height: 69px;
  655.     outline: 0;
  656.     width: 230px;
  657. }
  658. .contact-form .textarea {
  659.     background: url(\'/jscss/demoimg/201402/textarea.png\') no-repeat 117px 0 transparent;
  660.     height: 119px;
  661.     margin-top: -12px;
  662. }
  663. .contact-form textarea {
  664.     background: transparent;
  665.     border: none;
  666.     color: #8B8B8B;
  667.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  668.     font-size: 12px;
  669.     height: 70px;
  670.     margin-left: 14px;
  671.     margin-top: 13px;
  672.     outline: 0;
  673.     padding: 10px;
  674.     resize: none;
  675.     width: 240px;
  676. }
  677. .contact-form .select { margin-top: -12px; }
  678. .contact-form .submit {
  679.     float: right;
  680.     padding-right: 14px;
  681.     width: 230px;
  682. }
  683. .contact-form .submit input {
  684.     background: url(\'/jscss/demoimg/201402/submit.png\') no-repeat 0 0 transparent;
  685.     border: 0;
  686.     color: #fff;
  687.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  688.     font-size: 20px;
  689.     height: 58px;
  690.     outline: 0;
  691.     padding-left: 50px;
  692.     text-align: left;
  693.     text-transform: uppercase;
  694.     width: 216px;
  695. }
  696. .contact-form .required-text {
  697.     color: #8b8b8b;
  698.     font-size: 11px;
  699.     padding-top: 5px;
  700. }
  701. .map-wrapper {
  702.     float: right;
  703.     position: absolute;
  704.     right: 9px;
  705.     top: 145px;
  706.     width: 242px;
  707. }
  708. .map-wrapper #map {
  709.     border: 1px solid #a4a5a5;
  710.     height: 274px;
  711.     width: 240px;
  712. }
  713. .map-mask {
  714.     background: url(\'/jscss/demoimg/201402/map_mask.png\') no-repeat 0 0 transparent;
  715.     height: 44px;
  716.     left: 0;
  717.     position: absolute;
  718.     top: 232px;
  719.     width: 47px;
  720. }
  721. .map-launcher {
  722.     color: #fff;
  723.     float: right;
  724.     font-size: 11px;
  725.     font-weight: 700;
  726.     padding: 8px 0;
  727.     text-decoration: none;
  728. }
  729. .map-launcher span { color: #06b7ea; }
  730. /*=== Footer ===*/
  731. .site-footer {
  732.     background: url(\'/jscss/demoimg/201402/footer_bg.jpg\') repeat-x top center transparent;
  733.     border-top: 1px solid #4f4f4f;
  734.     height: 55px;
  735.     line-height: 50px;
  736. }
  737. .site-footer p, .site-footer address {
  738.     color: #939393;
  739.     float: left;
  740.     font-size: 11px;
  741.     font-style: normal;
  742.     margin-right: 2px;
  743. }
  744. .site-footer p a {
  745.     color: #06b7ea;
  746.     text-decoration: none;
  747. }
  748. .footer-links {
  749.     color: #939393;
  750.     float: right;
  751.     font-size: 11px;
  752.     list-style: none;
  753.     margin-right: 4px;
  754. }
  755. .footer-links li {
  756.     float: left;
  757. }
  758. .footer-links a {
  759.     color: #939393;
  760.     display: inline-block;
  761.     padding: 0 6px 0 8px;
  762.     text-decoration: none;
  763. }
  764. .footer-links .active a { color: #fff; }
  765. .fb-like {
  766.     float: right;
  767.     margin-top: 4px;
  768.     width: 80px;
  769. }
  770. /* selectmenu */
  771. .ui-selectmenu {
  772.     color: #8f8f8f;
  773.     font-size: 11px;
  774.     height: 41px;
  775.     margin: 14px;
  776.     outline: 0;
  777. }
  778. .ui-selectmenu .ui-selectmenu-status {
  779.     line-height: 41px;
  780.     padding: 0 12px;
  781. }
  782. .ui-selectmenu .ui-selectmenu-icon {
  783.     background: url(\'/jscss/demoimg/201402/select_icon.jpg\') no-repeat 0 0 transparent;
  784.     height: 31px;
  785.     margin-top: -16px;
  786.     width: 31px;
  787. }
  788. .ui-selectmenu.ui-state-active .ui-selectmenu-icon { background-position: -31px 0; }
  789. .ui-selectmenu-menu {
  790.     background: #fff;
  791.     padding: 0 4px;
  792. }
  793. .ui-selectmenu-menu a {
  794.     border-top: 1px solid #f0f0f0;
  795.     color: #8f8f8f;
  796.     font-size: 11px;
  797.     padding: 8px;
  798. }
  799. .form-message {
  800.     font-weight: 700;
  801.     margin-bottom: 10px;
  802.     margin-top: -10px;
  803. }
  804. .form-message.error { color: #c00; }
  805. .form-message.success { color: #2686B3; }
  806. </style>
  807. </head>
  808. <body>
  809. <div class=\"site-content services\">
  810.   <div class=\"wrapper\">
  811.     <ul class=\"services-list\">
  812.       <li>
  813.         <h2> <a href=\"#\" title=\"\">CSS3+PIE圆角插件实现超酷的导航菜单和按钮</a> </h2>
  814.         <div>
  815.           <div class=\"service-content\">
  816.             <div class=\"service-info-text\">
  817.               <p>此作品是一款可以帮助网友们美化菜单和按钮,跟丑陋的、传统的菜单和按钮说88,默认整理了4种主题颜色,网友们可以自己无限添加哦,主要用了CSS3+PIE圆角插件实现,这样就可以兼容所有浏览器啦,菜单和按钮的长度都是自适应。。。</p>
  818.             </div>
  819.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Monitoreo\" /> </div>
  820.           </div>
  821.         </div>
  822.       </li>
  823.       <li>
  824.         <h2> <a href=\"#\" title=\"\"><strong>带动画全屏图文切换+键盘控制的Jquery焦点图</strong></a> </h2>
  825.         <div>
  826.           <div class=\"service-content\">
  827.             <div class=\"service-info-text\">
  828.               <p>此Jquery特效是一款效果非常酷的图片轮播,它包括了以下功能<br />1、带动画效果<br />2、全屏轮播<br />3、轮播内容由图文切换<br />4、键盘左右方向键控制左右滚动<br />5、背景跟随切换<br />6、自动播放。。。</p>
  829.             </div>
  830.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Alarmas y cámaras\" /> </div>
  831.           </div>
  832.         </div>
  833.       </li>
  834.       <li>
  835.         <h2> <a href=\"#\" title=\"\">网友康松分享仿Win8布局+lightbox弹出层插件显示页面</a> </h2>
  836.         <div>
  837.           <div class=\"service-content\">
  838.             <div class=\"service-info-text\">
  839.               <p>此作品是仿Win8布局+lightbox弹出层Jquery插件实现的,它把整个网站的功能都在这个布局里面展示,点击的时候以弹出层的方式来显示页面,这样就可以减少了繁琐的跳转页面操作,提高了用户体验,是一种最近比较流行的网页布局,网友们好好利用哦。。。</p>
  840.             </div>
  841.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Protección perimetral\" /> </div>
  842.           </div>
  843.         </div>
  844.       </li>
  845.       <li>
  846.         <h2> <a href=\"#\" title=\"\">一款带3D效果带略缩图的幻灯片Jquery插件</a> </h2>
  847.         <div>
  848.           <div class=\"service-content\">
  849.             <div class=\"service-info-text\">
  850.               <p>此Jquery插件一款带3D效果带略缩图的幻灯片效果,功能非常强大,默认带有3种皮肤,用法也很简单,可以灵活设置6个参数,1、skin:皮肤目录设置,包括3个(cool,crazy,simple)2、numberOfThumbsPerScreen:略缩图的滚动个数,默认为7个。。。</p>
  851.             </div>
  852.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Consorcios\" /> </div>
  853.           </div>
  854.         </div>
  855.       </li>
  856.       <li>
  857.         <h2> <a href=\"#\" title=\"\">网友Kevin分享原创图片滚动Jquery插件kevinScroll</a> </h2>
  858.         <div>
  859.           <div class=\"service-content\">
  860.             <div class=\"service-info-text\">
  861.               <p>首先非常感谢网友Kevin的无私分享,此Jquery插件实现图片滚动功能,这是他写的一款原创作品,插件命名为kevinScroll,现在分享的是V1.0版本,还在不断完善中,插件功能非常强大,可以灵活设置7个参数,页面上可以多次调用都不起冲突。。。</p>
  862.             </div>
  863.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Protección de personas\" /> </div>
  864.           </div>
  865.         </div>
  866.       </li>
  867.       <li>
  868.         <h2> <a href=\"#\" title=\"\">一款国外的四图轮播幻灯片Jquery插件</a> </h2>
  869.         <div>
  870.           <div class=\"service-content\">
  871.             <div class=\"service-info-text\">
  872.               <p>此Jquery插件是一款国外的四图轮播幻灯片,功能不是很复杂,非常实用,图片使用跟平时的焦点图的用法有点不同,它的图片不放到主体里面,通通都作为背景图片使用,主体就用文字来描述,包含了图片播放、图片滑动、图片左右轮播。。。</p>
  873.             </div>
  874.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Auditorías\" /> </div>
  875.           </div>
  876.         </div>
  877.       </li>
  878.       <li>
  879.         <h2> <a href=\"#\" title=\"\">原生js实现3维图片里外转动放大缩小特效</a> </h2>
  880.         <div>
  881.           <div class=\"service-content\">
  882.             <div class=\"service-info-text\">
  883.               <p>此js特效实现3维图片里外转动放大缩小功能,是一款效果非常酷的作品,作为图片轮播特效来讲,它算比较新有创意的啦,包含了图片滚动、图片放大、图片缩小、鼠标悬浮事件等功能。。。</p>
  884.             </div>
  885.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Desarrollos a medida\" /> </div>
  886.           </div>
  887.         </div>
  888.       </li>
  889.     </ul>
  890.   </div>
  891. </div>
  892. <script type=\"text/javascript\" src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
  893. <script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
  894. <script>
  895. $(function(){
  896.     $(\'a[data-fade]\').click(function(e){
  897.         $(\'
    \'
    ).prependTo(\'body\').fadeIn(function(){
  898.             return true;
  899.         });
  900.     })
  901.     if ($(\'.select-wrapper\').size () > 0) {
  902.         $(\'.select-wrapper:not(.wide) select\').selectmenu({
  903.             transferClasses: true,
  904.             menuWidth: 154
  905.         });
  906.         $(\'.select-wrapper.wide select\').selectmenu({
  907.             transferClasses: true,
  908.             menuWidth: 214
  909.         });
  910.     }
  911.     $(\'.site-nav li:not(.active)\').hover(function(){
  912.         $(this).children(\'span\').stop(true, true).fadeIn();
  913.         $(this).children(\'a\').stop(true, true).animate({ color: \'#fff\' });
  914.     }, function(){
  915.         $(this).children(\'span\').stop(true, true).fadeOut();
  916.         $(this).children(\'a\').stop(true, true).animate({ color: \'#1ba7da\' });
  917.     });
  918.     if ($(\'#home-slider\').size() > 0) {
  919.         $(\'#home-slider\').plusSlider({
  920.             autoPlay: true,
  921.             displayTime: 4000,
  922.             createPagination: false,
  923.             keyboardNavigation: false,
  924.             sliderType: \'fader\',
  925.             pauseOnHover: false
  926.         });
  927.         $(\'\').appendTo(\'.plusSlider .arrow\');
  928.     }
  929.     $(\'.jcarousel-prev, .plusSlider .arrow.prev\').hover(function(){
  930.         if($(this).attr(\'disabled\') != \'disabled\') {
  931.             $(this).children().stop(true, true).animate({\'left\' : -10});
  932.         }
  933.     }, function(){
  934.         $(this).children().stop(true, true).animate({\'left\' : 0});
  935.     });
  936.     $(\'.jcarousel-next, .plusSlider .arrow.next\').hover(function(){
  937.         if($(this).attr(\'disabled\') != \'disabled\') {
  938.             $(this).children().stop(true, true).animate({\'left\' : 10});
  939.         }
  940.     }, function(){
  941.         $(this).children().stop(true, true).animate({\'left\' : 0});
  942.     });
  943.     if ($(\'.products-category:not(.single)\').size() > 0) {
  944.         $(\'.products-category\').jcarousel({
  945.             buttonNextHTML: \'Next\',
  946.             buttonPrevHTML: \'Previous\',
  947.             scroll: 4
  948.         });
  949.         optionIndex = $(\'select.products-categories option:selected\').index();
  950.         $(\'.jcarousel-container:eq(\' + optionIndex + \')\').addClass(\'active\');
  951.         $(\'.jcarousel-container:not(.active)\').hide();
  952.         $(\'select.products-categories\').change(function(){
  953.             optionIndex = $(this).children(\':selected\').index();
  954.             $(\'.jcarousel-container.active\').fadeOut(function(){
  955.                 $(this).removeClass(\'active\');
  956.                 $(\'.jcarousel-container:eq(\' + optionIndex + \')\').fadeIn(function(){
  957.                     $(this).addClass(\'active\');
  958.                 });
  959.             });
  960.         });
  961.     }
  962.     $(\'.products-item\').mouseenter(function(){
  963.         $item = $(this);
  964.         $item.find(\'.product-image-hover\').stop(true, true).fadeIn();
  965.     }).mouseleave(function(){
  966.         $item = $(this);
  967.         $item.find(\'.product-image-hover\').stop(true, true).fadeOut();
  968.     });
  969.     $(\'.products-item\').find(\'.product-info-icon, .product-image-hover\').click(function(){
  970.         $container = $(this).closest(\'.products-item\');
  971.         $icon = $container.find(\'.product-info-icon\');
  972.         if(!$icon.hasClass(\'active\')) {
  973.             $icon.stop(true, true).animate({ \'bottom\' : 62 }).addClass(\'active\').animate({ \'bottom\' : 24 });
  974.             if ($container.parent().hasClass(\'single\')) {
  975.                 contentHeight = 72;
  976.             } else {
  977.                 contentHeight = 106;
  978.             }
  979.             $container.find(\'.product-info-wrapper\').children(\'.product-info\').stop(true, true).animate({ \'height\' : contentHeight });
  980.         } else {
  981.             if ($(this).hasClass(\'product-info-icon\')) {
  982.                 $icon.stop(true, true).animate({ \'bottom\' : 62 }).removeClass(\'active\').animate({ \'bottom\' : 30 });
  983.                 $container.find(\'.product-info-wrapper\').children(\'.product-info\').stop(true, true).animate({ \'height\' : 8 });
  984.             }
  985.         }
  986.     });
  987.     $(\'.select-product\').click(function(e){
  988.         $product = $(this).closest(\'.products-item\');
  989.         $.cookie(\'selected_category\', $(\'.selectmenu.products-categories\').val(), \'/\');
  990.         $.cookie(\'selected_product\', $product.data(\'product-id\'), \'/\');
  991.     });
  992.     if ($(\'.services-list\').size() > 0) {
  993.         $(\'.services-list\').accordion({
  994.             autoHeight: false,
  995.             create: function (event, ui) {
  996.                 $(\'.services-list li:first h2 span\').addClass(\'active\');
  997.             },
  998.             changestart: function (event, ui) {
  999.                 ui.oldHeader.children(\'span\').animate({ \'left\' : 561 }, function () {
  1000.                     $(this).removeClass(\'active\').animate({ \'left\' : 600 });
  1001.                 });
  1002.                 ui.newHeader.children(\'span\').stop(true, true).animate({ \'left\' : 561 }, function () {
  1003.                     $(this).addClass(\'active\').animate({ \'left\' : 600 });
  1004.                 });
  1005.                 return true;
  1006.             },
  1007.             change: function (event, ui) {
  1008.                 return true;
  1009.             }
  1010.         });
  1011.     }
  1012.     if ($(\'#map\').size() > 0) {
  1013.         mapInit();
  1014.     }
  1015.     $(\'.contact-form .select-wrapper.product, .contact-form .products-category, .contact-form .products-item\').hide();
  1016.     toggleProductCategory(true);
  1017.     $(\'select.products-category-selector\').change(function(){
  1018.         toggleProductCategory(false);
  1019.     });
  1020.     $(\'select.products-item-selector\').change(function(){
  1021.         toggleProductItem();
  1022.     });
  1023.     $(\'#loading-mask\').fadeOut(\'slow\', function(){
  1024.         $(this).remove();
  1025.     });
  1026. });
  1027. function toggleProductCategory (onload) {
  1028.     categorySelectedIndex = $(\'select.products-category-selector :selected\').index();
  1029.     $(\'.select-wrapper.product.active\').hide().removeClass(\'active\');
  1030.     $(\'.select-wrapper.product:eq(\' + categorySelectedIndex + \')\').show().addClass(\'active\');
  1031.     $(\'.products-category.active\').fadeOut().removeClass(\'active\').children(\'li.active\').fadeOut().removeClass(\'active\');
  1032.     $(\'.products-category:eq(\' + (categorySelectedIndex - 1) + \')\').fadeIn(function(){
  1033.         $(this).addClass(\'active\');
  1034.         toggleProductItem();
  1035.     });
  1036.     return true;
  1037. }
  1038. function toggleProductItem (onload) {
  1039.     categorySelectedIndex = $(\'.products-category-selector :selected\').index();
  1040.     productSelectedIndex = $(\'.select-wrapper.product.active select :selected\').index();
  1041.     if (productSelectedIndex > 0) {
  1042.         $(\'.products-category.active .products-item.active\').fadeOut().removeClass(\'active\');
  1043.         $(\'.products-category.active .products-item:eq(\' + (productSelectedIndex - 1) + \')\').fadeIn().addClass(\'active\');
  1044.     }
  1045. }
  1046. function mapInit () {
  1047.     var latlng = new google.maps.LatLng(-34.462737, -58.524939);
  1048.     var myOptions = {
  1049.         zoom: 16,
  1050.         center: latlng,
  1051.         mapTypeId: google.maps.MapTypeId.ROADMAP
  1052.     };
  1053.     var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);
  1054.     var image = \'img/map_marker.png\';
  1055.     var beachMarker = new google.maps.Marker({
  1056.         position: latlng,
  1057.         map: map,
  1058.         icon: image
  1059.     });
  1060. }
  1061. </script>
  1062. <div style=\"text-align:center;clear:both\">
  1063. </div>
  1064. </body>
  1065. </html>


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
  2. <html xmlns=\"http://www.w3.org/1999/xhtml\">
  3. <head>
  4. <meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\" />
  5. <title>jQuery动画效果的手风琴特效</title>
  6. <style>
  7. .ui-selectmenu { display: block; display: inline-block; position: relative; height: 2.2em; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
  8. .ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
  9. .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 */
  10. .ui-selectmenu-open { display: block; }
  11. .ui-selectmenu-menu-popup { margin-top: -1px; }
  12. .ui-selectmenu-menu-dropdown { }
  13. .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; }
  14. .ui-selectmenu-menu li a,.ui-selectmenu-status { line-height: 1.4em; display: block; padding: .405em 1em; outline:none; text-decoration:none; }
  15. .ui-selectmenu-menu li.ui-state-disabled a { cursor: default; }
  16. .ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
  17. .ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
  18. .ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
  19. .ui-selectmenu-status { line-height: 1.4em; }
  20. .ui-selectmenu-open li.ui-selectmenu-item-focus a { }
  21. .ui-selectmenu-open li.ui-selectmenu-item-selected { }
  22. .ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
  23. .ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
  24. .ui-selectmenu-menu li .ui-selectmenu-item-content { }
  25. .ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
  26. /* for optgroups */
  27. .ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
  28. .ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
  29. .ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
  30. /* IE6 workaround (dotted transparent borders) */
  31. * html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
  32. * html .ui-selectmenu-menu li a { position: relative }
  33. html, body, div, span, object, iframe,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. abbr, address, cite, code,
  36. del, dfn, em, img, ins, kbd, q, samp,
  37. small, strong, sub, sup, var,
  38. b, i,
  39. dl, dt, dd, ol, ul, li,
  40. fieldset, form, label, legend,
  41. table, caption, tbody, tfoot, thead, tr, th, td,
  42. article, aside, canvas, details, figcaption, figure,
  43. footer, header, hgroup, menu, nav, section, summary,
  44. time, mark, audio, video {
  45.     margin:0;
  46.     padding:0;
  47.     border:0;
  48.     outline:0;
  49.     font-size:100%;
  50.     vertical-align:baseline;
  51.     background:transparent;
  52. }
  53. body {
  54.     line-height:1;
  55. }
  56. article,aside,details,figcaption,figure,
  57. footer,header,hgroup,menu,nav,section {
  58.     display:block;
  59. }
  60. nav ul {
  61.     list-style:none;
  62. }
  63. blockquote, q {
  64.     quotes:none;
  65. }
  66. blockquote:before, blockquote:after,
  67. q:before, q:after {
  68.     content:\'\';
  69.     content:none;
  70. }
  71. a {
  72.     margin:0;
  73.     padding:0;
  74.     font-size:100%;
  75.     vertical-align:baseline;
  76.     background:transparent;
  77. }
  78. ins {
  79.     background-color:#ff9;
  80.     color:#000;
  81.     text-decoration:none;
  82. }
  83. mark {
  84.     background-color:#ff9;
  85.     color:#000;
  86.     font-style:italic;
  87.     font-weight:bold;
  88. }
  89. del {
  90.     text-decoration: line-through;
  91. }
  92. abbr[title], dfn[title] {
  93.     border-bottom:1px dotted;
  94.     cursor:help;
  95. }
  96. table {
  97.     border-collapse:collapse;
  98.     border-spacing:0;
  99. }
  100. hr {
  101.     display:block;
  102.     height:1px;
  103.     border:0;
  104.     border-top:1px solid #cccccc;
  105.     margin:1em 0;
  106.     padding:0;
  107. }
  108. input, select {
  109.     vertical-align:middle;
  110. }
  111. body {
  112.     background: url(\'/jscss/demoimg/201402/main_bg.jpg\') no-repeat top center #b3b3b3;
  113.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  114.     font-size: 12px;
  115. }
  116. #loading-mask {
  117.     background: #fff;
  118.     height: 100%;
  119.     left: 0;
  120.     position: fixed;
  121.     top: 0;
  122.     width: 100%;
  123.     z-index: 99999;
  124. }
  125. #loading-mask.hidden { display: none; }
  126. .wrapper {
  127.     margin: auto;
  128.     position: relative;
  129.     width: 960px;
  130. }
  131. .site-header {
  132.     height: 159px;
  133.     margin: auto;
  134.     overflow: hidden;
  135.     width: 960px;
  136. }
  137. .site-logo {
  138.     float: left;
  139.     margin-top: 6px;
  140. }
  141. .site-nav {
  142.     float: right;
  143.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  144.     font-size: 15px;
  145.     margin-top: 42px;
  146.     overflow: hidden;
  147.     text-transform: uppercase;
  148. }
  149. .site-nav li {
  150.     float: left;
  151.     margin-right: 11px;
  152.     position: relative;
  153.     width: 78px;
  154. }
  155. .site-nav li.services { width: 99px; }
  156. .site-nav li.products { width: 124px; }
  157. .site-nav li.contact { width: 101px; }
  158. .site-nav a {
  159.     color: #1ba7da;
  160.     display: block;
  161.     padding-bottom: 8px;
  162.     padding-top: 12px;
  163.     position: relative;
  164.     text-align: center;
  165.     text-decoration: none;
  166.     z-index: 200;
  167. }
  168. .site-nav .hover { margin-top: 10px; }
  169. .site-nav .active a, .site-nav .hover a { color: #fff; }
  170. .site-nav span {
  171.     background: url(\'/jscss/demoimg/201402/nav_sprite.png\') no-repeat 0 0 transparent;
  172.     display: none;
  173.     height: 35px;
  174.     left: 0;
  175.     position: absolute;
  176.     top: 0;
  177.     width: 100%;
  178.     z-index: 100;
  179. }
  180. .site-nav .active span {
  181.     display: block;
  182. }
  183. .site-nav .home span { background-position: 0 -43px; }
  184. .site-nav .home.active span { background-position: 0 0; }
  185. .site-nav .services span { background-position: -91px -43px; }
  186. .site-nav .services.active span { background-position: -91px 0; }
  187. .site-nav .products span { background-position: -203px -43px; }
  188. .site-nav .products.active span { background-position: -203px 0; }
  189. .site-nav .contact span { background-position: -340px -43px; }
  190. .site-nav .contact.active span { background-position: -340px 0; }
  191. .site-content-bottom {
  192.     background: url(\'/jscss/demoimg/201402/bottom_info_bg.png\') no-repeat center top transparent;
  193.     height: 301px;
  194.     margin-top: -84px;
  195.     position: relative;
  196.     z-index: 300;
  197. }
  198. body.home .site-content-bottom { margin-top: -116px; }
  199. .clients-block {
  200.     float: left;
  201.     margin-left: 10px;
  202.     margin-top: 128px;
  203. }
  204. .clients-block h1 {
  205.     color: #fff;
  206.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  207.     font-size: 15px;
  208.     text-transform: uppercase;
  209. }
  210. .clients-list {
  211.     list-style: none;
  212.     margin-top: 20px;
  213. }
  214. .clients-list li {
  215.     float: left;
  216.     margin-right: 10px;
  217. }
  218. .promo-block {
  219.     background: url(\'/jscss/demoimg/201402/promo_bg.png\') no-repeat bottom left transparent;
  220.     float: left;
  221.     height: 201px;
  222.     margin-left: 10px;
  223.     margin-top: 54px;
  224.     padding-left: 34px;
  225.     position: relative;
  226.     width: 391px;
  227. }
  228. .promo-block h1 {
  229.     color: #313131;
  230.     font-family: \'Ubuntu\', Arial, Helvetica, sans-serif;
  231.     font-size: 15px;
  232.     margin-top: 74px;
  233.     text-transform: uppercase;
  234. }
  235. .promo-block p {
  236.     color: #c5f1ff;
  237.     font-size: 12px;
  238.     margin: 8px 0;
  239.     width: 248px;
  240. }
  241. .promo-block p.important {
  242.     color: #fff;
  243.     font-size: 11px;
  244.     margin-top: 0;
  245. }
  246. .promo-block a {
  247.     color: #fff;
  248.     font-weight: 700;
  249.     text-decoration: none;
  250. }
  251. .promo-block img {
  252.     position: absolute;
  253.     right: -14px;
  254.     top: 0;
  255. }
  256. /*=== Content ===*/
  257. .content-title {
  258.     color: #fff;
  259.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  260.     font-size: 34px;
  261.     left: 550px;
  262.     position: absolute;
  263.     top: 30px;
  264. }
  265. .select-wrapper {
  266.     background: url(\'/jscss/demoimg/201402/select_bg.png\') no-repeat 0 0 transparent;
  267.     float: left;
  268.     height: 69px;
  269.     width: 226px;
  270. }
  271. select { width: 198px; z-index: 999; }
  272. .select-wrapper.wide {
  273.     background: url(\'/jscss/demoimg/201402/select_bg_wide.png\');
  274.     width: 290px;
  275. }
  276. .select-wrapper.wide select { width: 262px; }
  277. /*=== Home ===*/
  278. body.home .site-header {
  279.     position: relative;
  280.     z-index: 200;
  281. }
  282. body.home .site-content {
  283.     margin-top: -63px;
  284.     position: relative;
  285.     z-index: 100;
  286. }
  287. .plusSlider {
  288.     height: 530px;
  289.     margin: auto;
  290.     overflow: hidden;
  291.     position: relative;
  292.     width: 1185px;
  293. }
  294. #home-slider {
  295.     left: 0;
  296.     height: 530px;
  297.     position: relative;
  298.     width: 1185px;
  299.     z-index: 100;
  300. }
  301. #home-slider .child {
  302.     display: none;
  303.     height: 530px;
  304.     left: 0;
  305.     position: absolute;
  306.     top: 0;
  307.     width: 1185px;
  308. }
  309. #home-slider h2 {
  310.     color: #fff;
  311.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  312.     font-size: 34px;
  313. }
  314. #home-slider h3 {
  315.     color: #fff;
  316.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  317.     font-size: 15px;
  318.     font-weight: 700;
  319.     text-transform: uppercase;
  320. }
  321. #home-slider h4 {
  322.     color: #2c2c2c;
  323.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  324.     font-size: 15px;
  325.     margin-bottom: 2px;
  326.     text-transform: uppercase;
  327. }
  328. #home-slider h4 span { color: #10b0e6; }
  329. #home-slider p {
  330.     color: #696969;
  331.     line-height: 16px;
  332. }
  333. #home-slider p a {
  334.     color: #07a3d7;
  335.     font-weight: 700;
  336.     text-decoration: none;
  337. }
  338. #home-slider p a span { color: #474747; }
  339. #home-slider .slider-item-header, #home-slider .slider-item-content {
  340.     position: absolute;
  341.     z-index: 200;
  342. }
  343. #home-slider .slider-item-header {
  344.     left: 200px;
  345.     padding-top: 35px;
  346.     top: 162px;
  347. }
  348. #home-slider .slider-item-content {
  349.     left: 280px;
  350.     top: 316px;
  351.     width: 330px;
  352. }
  353. #home-slider .slider-item-image {
  354.     left: 0;
  355.     position: absolute;
  356.     top: 0;
  357.     z-index: 100;
  358. }
  359. .plusSlider.home-slider .arrow {
  360.     position: absolute;
  361.     top: 0;
  362.     z-index: 200;
  363. }
  364. .plusSlider.home-slider .arrow.prev { left: 110px; }
  365. .plusSlider.home-slider .arrow.next { right: 110px; }
  366. /*=== Products ===*/
  367. .site-content.products .wrapper {
  368.     background: url(\'/jscss/demoimg/201402/content_bg_products.png\') no-repeat top right transparent;
  369.     height: 579px;
  370. }
  371. .products-filter {
  372.     float: left;
  373.     margin-left: 16px;
  374.     margin-top: 16px;
  375. }
  376. .products-filter p {
  377.     color: #2b2b2b;
  378.     float: left;
  379.     line-height: 69px;
  380. }
  381. .jcarousel-container {
  382.     float: left;
  383.     clear: left;
  384.     height: 390px;
  385.     margin-top: 42px;
  386.     width: 960px;
  387. }
  388. .jcarousel-clip {
  389.     overflow: hidden;
  390.     margin: 0 72px;
  391.     width: 816px;
  392. }
  393. .jcarousel-prev, .jcarousel-next, .plusSlider .arrow {
  394.     cursor: pointer;
  395.     height: 70px;
  396.     position: absolute;
  397.     text-indent: -2000em;
  398.     top: 56px;
  399.     width: 54px;
  400. }
  401. .jcarousel-prev-disabled, .jcarousel-next-disabled {
  402.     opacity: 0.5;
  403.     cursor: default;
  404. }
  405. .jcarousel-prev, .plusSlider .arrow.prev { left: 0; }
  406. .jcarousel-next, .plusSlider .arrow.next {
  407.     height: 92px;
  408.     right: 0;
  409.     width: 72px;
  410. }
  411. .plusSlider .arrow.next {
  412.     right: 110px;
  413.     top: 162px;
  414. }
  415. .jcarousel-prev span, .jcarousel-next span, .plusSlider .arrow span {
  416.     background: url(\'/jscss/demoimg/201402/products_arrows.png\') no-repeat 0 0 transparent;
  417.     display: block;
  418.     height: 70px;
  419.     left: 0;
  420.     position: absolute;
  421.     top: 0;
  422.     width: 54px;
  423. }
  424. .jcarousel-prev { top: 66px; }
  425. .plusSlider .arrow.prev { top: 174px; }
  426. .jcarousel-prev span, .plusSlider .arrow.prev span { background-position: 0 -10px; }
  427. .jcarousel-next span, .plusSlider .arrow.next span {
  428.     background-position: -55px 0;
  429.     height: 92px;
  430.     width: 72px;
  431. }
  432. .products-category {
  433.     clear: both;
  434. }
  435. .product-choose .products-category {
  436.     left: 18px;
  437.     position: absolute;
  438.     top: 288px;
  439.     width: 185px;
  440. }
  441. .products-category li {
  442.     background: url(\'/jscss/demoimg/201402/product_shadow.png\') no-repeat bottom center transparent;
  443.     margin-right: 25px;
  444.     padding-bottom: 52px;
  445.     position: relative;
  446.     width: 185px;
  447. }
  448. .product-choose .products-category li {
  449.     left: 0;
  450.     position: absolute;
  451.     top: 0;
  452. }
  453. .product-image-wrapper { height: 179px; }
  454. .product-image-wrapper img {
  455.     border: 1px solid #fff;
  456.     position: relative;
  457.     z-index: 400;
  458. }
  459. .product-image-hover {
  460.     background: url(\'/jscss/demoimg/201402/product_hover.png\') no-repeat 0 0 transparent;
  461.     cursor: pointer;
  462.     display: none;
  463.     height: 179px;
  464.     left: 0;
  465.     position: absolute;
  466.     top: 0;
  467.     width: 185px;
  468.     z-index: 500;
  469. }
  470. .product-info-wrapper {
  471.     background: url(\'/jscss/demoimg/201402/product_info_bg.png\') no-repeat bottom center transparent;
  472.     padding-bottom: 11px;
  473.     position: relative;
  474.     z-index: 400;
  475. }
  476. .product-info {
  477.     background: #06b7ea;
  478.     height: 8px;
  479.     overflow: hidden;
  480.     padding: 10px;
  481. }
  482. .product-info .product-name {
  483.     color: #fff;
  484.     margin-bottom: 10px;
  485.     text-transform: uppercase;
  486. }
  487. .product-info p {
  488.     color: #caf2ff;
  489.     margin: 6px 0;
  490. }
  491. .product-info p strong {
  492.     color: #fff;
  493. }
  494. .product-info p a {
  495.     color: #fff;
  496. }
  497. .product-info-icon {
  498.     background: url(\'/jscss/demoimg/201402/product_info_icon.png\') no-repeat 0 0 transparent;
  499.     cursor: pointer;
  500.     bottom: 30px;
  501.     height: 45px;
  502.     position: absolute;
  503.     right: 7px;
  504.     width: 50px;
  505.     z-index: 300;
  506. }
  507. .product-info-icon.active { background-position: -53px 0; }
  508. /*=== Services ===*/
  509. body.services { background-image: url(\'/jscss/demoimg/201402/services_bg.jpg\'); }
  510. .site-content.services .wrapper {
  511.     height: 870px;
  512. }
  513. .services-list {
  514.     float: left;
  515.     margin-top: 118px;
  516.     width: 638px;
  517. }
  518. .services-list li {
  519.     list-style: none;
  520.     margin-bottom: 4px;
  521. }
  522. .services-list h2 {
  523.     cursor: pointer;
  524.     position: relative;
  525. }
  526. .services-list h2 a {
  527.     background-color: #ffffff;
  528.     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ffffff)); /* Saf4+, Chrome */
  529.     background-image: -webkit-linear-gradient(top, #ebebeb, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */
  530.     background-image: -moz-linear-gradient(top, #ebebeb, #ffffff); /* FF3.6 */
  531.     background-image: -ms-linear-gradient(top, #ebebeb, #ffffff); /* IE10 */
  532.     background-image: -o-linear-gradient(top, #ebebeb, #ffffff); /* Opera 11.10+ */
  533.     background-image: linear-gradient(top, #ebebeb, #ffffff);
  534.     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=\'#ebebeb\', EndColorStr=\'#ffffff\'); /* IE6-IE9 */
  535.     border-color: #fff;
  536.     border-style: solid;
  537.     border-width: 1px 1px 0 1px;
  538.     color: #10b0e6;
  539.     display: block;
  540.     line-height: 66px;
  541.     padding-left: 20px;
  542.     position: relative;
  543.     text-decoration: none;
  544.     width: 578px;
  545.     z-index: 300;
  546. }
  547. .services h2 span {
  548.     background: url(\'/jscss/demoimg/201402/service_status.png\') no-repeat 0 0 transparent;
  549.     height: 49px;
  550.     left: 600px;
  551.     position: absolute;
  552.     top: 8px;
  553.     width: 39px;
  554.     z-index: 200;
  555. }
  556. .services h2 span.active { background-position: 0 -50px; }
  557. .service-content {
  558.     background: #fff;
  559.     border-color: #fff;
  560.     border-style: solid;
  561.     border-width: 0 1px 1px 1px;
  562.     color: #939393;
  563.     line-height: 16px;
  564.     overflow: hidden;
  565.     width: 598px;
  566. }
  567. .service-info-text {
  568.     float: left;
  569.     margin-left: 20px;
  570.     text-align: justify;
  571.     width: 400px;
  572. }
  573. .service-info-image {
  574.     float: right;
  575.     margin-right: 20px;
  576. }
  577. /*=== Contact ===*/
  578. .site-content.contact .wrapper {
  579.     background: url(\'/jscss/demoimg/201402/content_bg_contact.png\') no-repeat right top transparent;
  580.     height: 692px;
  581. }
  582. .site-content.contact .content-title { left: 680px; }
  583. .contact-form {
  584.     float: left;
  585.     margin-top: 50px;
  586.     overflow: hidden;
  587.     width: 682px;
  588. }
  589. .contact-form .choose-title {
  590.     clear: both;
  591.     color: #8b8b8b;
  592.     float: left;
  593.     margin-bottom: 10px;
  594.     margin-left: 18px;
  595.     margin-top: 46px;
  596.     width: 190px;
  597. }
  598. .contact-form .product-choose {
  599.     background: url(\'/jscss/demoimg/201402/deco_arrow.png\') no-repeat 24px 160px transparent;
  600.     float: left;
  601.     min-height: 500px;
  602.     width: 230px;
  603. }
  604. .contact-form .product-choose .side-title {
  605.     color: #2b2b2b;
  606.     float: left;
  607.     font-weight: 700;
  608.     padding: 0 14px;
  609.     margin-bottom: 16px;
  610.     margin-top: 10px;
  611. }
  612. .contact-form .product-choose .select-wrapper.product {
  613.     margin-top: -14px;
  614. }
  615. .contact-form .products-category, .contact-form .products-item {
  616.     list-style: none;
  617. }
  618. .contact-form .fields-data {
  619.     border-left: 1px dotted #5f5f5f;
  620.     padding-left: 30px;
  621. }
  622. .contact-form .fields-data .contact-info {
  623.     color: #8b8b8b;
  624.     line-height: 18px;
  625.     margin-bottom: 20px;
  626.     width: 388px;
  627. }
  628. .contact-form .fields-data .contact-info a {
  629.     color: #06b7ea;
  630.     font-weight: 700;
  631.     text-decoration: none;
  632. }
  633. .contact-form .input.text {
  634.     height: 69px;
  635.     margin-top: -12px;
  636.     overflow: hidden;
  637. }
  638. .contact-form label {
  639.     color: #8b8b8b;
  640.     float: left;
  641.     font-size: 11px;
  642.     line-height: 69px;
  643.     padding-left: 48px;
  644.     width: 69px;
  645. }
  646. .contact-form .required { color: #2e98d8; }
  647. .contact-form input[type=text] {
  648.     background: url(\'/jscss/demoimg/201402/input_text.png\') no-repeat 0 0 transparent;
  649.     border: 0;
  650.     color: #8B8B8B;
  651.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  652.     font-size: 12px;
  653.     padding: 0 30px;
  654.     height: 69px;
  655.     outline: 0;
  656.     width: 230px;
  657. }
  658. .contact-form .textarea {
  659.     background: url(\'/jscss/demoimg/201402/textarea.png\') no-repeat 117px 0 transparent;
  660.     height: 119px;
  661.     margin-top: -12px;
  662. }
  663. .contact-form textarea {
  664.     background: transparent;
  665.     border: none;
  666.     color: #8B8B8B;
  667.     font-family: Tahoma, Arial, Helvetica, sans-serif;
  668.     font-size: 12px;
  669.     height: 70px;
  670.     margin-left: 14px;
  671.     margin-top: 13px;
  672.     outline: 0;
  673.     padding: 10px;
  674.     resize: none;
  675.     width: 240px;
  676. }
  677. .contact-form .select { margin-top: -12px; }
  678. .contact-form .submit {
  679.     float: right;
  680.     padding-right: 14px;
  681.     width: 230px;
  682. }
  683. .contact-form .submit input {
  684.     background: url(\'/jscss/demoimg/201402/submit.png\') no-repeat 0 0 transparent;
  685.     border: 0;
  686.     color: #fff;
  687.     font-family: \'Ubuntu\', Tahoma, Arial, Helvetica, sans-serif;
  688.     font-size: 20px;
  689.     height: 58px;
  690.     outline: 0;
  691.     padding-left: 50px;
  692.     text-align: left;
  693.     text-transform: uppercase;
  694.     width: 216px;
  695. }
  696. .contact-form .required-text {
  697.     color: #8b8b8b;
  698.     font-size: 11px;
  699.     padding-top: 5px;
  700. }
  701. .map-wrapper {
  702.     float: right;
  703.     position: absolute;
  704.     right: 9px;
  705.     top: 145px;
  706.     width: 242px;
  707. }
  708. .map-wrapper #map {
  709.     border: 1px solid #a4a5a5;
  710.     height: 274px;
  711.     width: 240px;
  712. }
  713. .map-mask {
  714.     background: url(\'/jscss/demoimg/201402/map_mask.png\') no-repeat 0 0 transparent;
  715.     height: 44px;
  716.     left: 0;
  717.     position: absolute;
  718.     top: 232px;
  719.     width: 47px;
  720. }
  721. .map-launcher {
  722.     color: #fff;
  723.     float: right;
  724.     font-size: 11px;
  725.     font-weight: 700;
  726.     padding: 8px 0;
  727.     text-decoration: none;
  728. }
  729. .map-launcher span { color: #06b7ea; }
  730. /*=== Footer ===*/
  731. .site-footer {
  732.     background: url(\'/jscss/demoimg/201402/footer_bg.jpg\') repeat-x top center transparent;
  733.     border-top: 1px solid #4f4f4f;
  734.     height: 55px;
  735.     line-height: 50px;
  736. }
  737. .site-footer p, .site-footer address {
  738.     color: #939393;
  739.     float: left;
  740.     font-size: 11px;
  741.     font-style: normal;
  742.     margin-right: 2px;
  743. }
  744. .site-footer p a {
  745.     color: #06b7ea;
  746.     text-decoration: none;
  747. }
  748. .footer-links {
  749.     color: #939393;
  750.     float: right;
  751.     font-size: 11px;
  752.     list-style: none;
  753.     margin-right: 4px;
  754. }
  755. .footer-links li {
  756.     float: left;
  757. }
  758. .footer-links a {
  759.     color: #939393;
  760.     display: inline-block;
  761.     padding: 0 6px 0 8px;
  762.     text-decoration: none;
  763. }
  764. .footer-links .active a { color: #fff; }
  765. .fb-like {
  766.     float: right;
  767.     margin-top: 4px;
  768.     width: 80px;
  769. }
  770. /* selectmenu */
  771. .ui-selectmenu {
  772.     color: #8f8f8f;
  773.     font-size: 11px;
  774.     height: 41px;
  775.     margin: 14px;
  776.     outline: 0;
  777. }
  778. .ui-selectmenu .ui-selectmenu-status {
  779.     line-height: 41px;
  780.     padding: 0 12px;
  781. }
  782. .ui-selectmenu .ui-selectmenu-icon {
  783.     background: url(\'/jscss/demoimg/201402/select_icon.jpg\') no-repeat 0 0 transparent;
  784.     height: 31px;
  785.     margin-top: -16px;
  786.     width: 31px;
  787. }
  788. .ui-selectmenu.ui-state-active .ui-selectmenu-icon { background-position: -31px 0; }
  789. .ui-selectmenu-menu {
  790.     background: #fff;
  791.     padding: 0 4px;
  792. }
  793. .ui-selectmenu-menu a {
  794.     border-top: 1px solid #f0f0f0;
  795.     color: #8f8f8f;
  796.     font-size: 11px;
  797.     padding: 8px;
  798. }
  799. .form-message {
  800.     font-weight: 700;
  801.     margin-bottom: 10px;
  802.     margin-top: -10px;
  803. }
  804. .form-message.error { color: #c00; }
  805. .form-message.success { color: #2686B3; }
  806. </style>
  807. </head>
  808. <body>
  809. <div class=\"site-content services\">
  810.   <div class=\"wrapper\">
  811.     <ul class=\"services-list\">
  812.       <li>
  813.         <h2> <a href=\"#\" title=\"\">CSS3+PIE圆角插件实现超酷的导航菜单和按钮</a> </h2>
  814.         <div>
  815.           <div class=\"service-content\">
  816.             <div class=\"service-info-text\">
  817.               <p>此作品是一款可以帮助网友们美化菜单和按钮,跟丑陋的、传统的菜单和按钮说88,默认整理了4种主题颜色,网友们可以自己无限添加哦,主要用了CSS3+PIE圆角插件实现,这样就可以兼容所有浏览器啦,菜单和按钮的长度都是自适应。。。</p>
  818.             </div>
  819.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Monitoreo\" /> </div>
  820.           </div>
  821.         </div>
  822.       </li>
  823.       <li>
  824.         <h2> <a href=\"#\" title=\"\"><strong>带动画全屏图文切换+键盘控制的Jquery焦点图</strong></a> </h2>
  825.         <div>
  826.           <div class=\"service-content\">
  827.             <div class=\"service-info-text\">
  828.               <p>此Jquery特效是一款效果非常酷的图片轮播,它包括了以下功能<br />1、带动画效果<br />2、全屏轮播<br />3、轮播内容由图文切换<br />4、键盘左右方向键控制左右滚动<br />5、背景跟随切换<br />6、自动播放。。。</p>
  829.             </div>
  830.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Alarmas y cámaras\" /> </div>
  831.           </div>
  832.         </div>
  833.       </li>
  834.       <li>
  835.         <h2> <a href=\"#\" title=\"\">网友康松分享仿Win8布局+lightbox弹出层插件显示页面</a> </h2>
  836.         <div>
  837.           <div class=\"service-content\">
  838.             <div class=\"service-info-text\">
  839.               <p>此作品是仿Win8布局+lightbox弹出层Jquery插件实现的,它把整个网站的功能都在这个布局里面展示,点击的时候以弹出层的方式来显示页面,这样就可以减少了繁琐的跳转页面操作,提高了用户体验,是一种最近比较流行的网页布局,网友们好好利用哦。。。</p>
  840.             </div>
  841.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Protección perimetral\" /> </div>
  842.           </div>
  843.         </div>
  844.       </li>
  845.       <li>
  846.         <h2> <a href=\"#\" title=\"\">一款带3D效果带略缩图的幻灯片Jquery插件</a> </h2>
  847.         <div>
  848.           <div class=\"service-content\">
  849.             <div class=\"service-info-text\">
  850.               <p>此Jquery插件一款带3D效果带略缩图的幻灯片效果,功能非常强大,默认带有3种皮肤,用法也很简单,可以灵活设置6个参数,1、skin:皮肤目录设置,包括3个(cool,crazy,simple)2、numberOfThumbsPerScreen:略缩图的滚动个数,默认为7个。。。</p>
  851.             </div>
  852.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Consorcios\" /> </div>
  853.           </div>
  854.         </div>
  855.       </li>
  856.       <li>
  857.         <h2> <a href=\"#\" title=\"\">网友Kevin分享原创图片滚动Jquery插件kevinScroll</a> </h2>
  858.         <div>
  859.           <div class=\"service-content\">
  860.             <div class=\"service-info-text\">
  861.               <p>首先非常感谢网友Kevin的无私分享,此Jquery插件实现图片滚动功能,这是他写的一款原创作品,插件命名为kevinScroll,现在分享的是V1.0版本,还在不断完善中,插件功能非常强大,可以灵活设置7个参数,页面上可以多次调用都不起冲突。。。</p>
  862.             </div>
  863.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Protección de personas\" /> </div>
  864.           </div>
  865.         </div>
  866.       </li>
  867.       <li>
  868.         <h2> <a href=\"#\" title=\"\">一款国外的四图轮播幻灯片Jquery插件</a> </h2>
  869.         <div>
  870.           <div class=\"service-content\">
  871.             <div class=\"service-info-text\">
  872.               <p>此Jquery插件是一款国外的四图轮播幻灯片,功能不是很复杂,非常实用,图片使用跟平时的焦点图的用法有点不同,它的图片不放到主体里面,通通都作为背景图片使用,主体就用文字来描述,包含了图片播放、图片滑动、图片左右轮播。。。</p>
  873.             </div>
  874.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Auditorías\" /> </div>
  875.           </div>
  876.         </div>
  877.       </li>
  878.       <li>
  879.         <h2> <a href=\"#\" title=\"\">原生js实现3维图片里外转动放大缩小特效</a> </h2>
  880.         <div>
  881.           <div class=\"service-content\">
  882.             <div class=\"service-info-text\">
  883.               <p>此js特效实现3维图片里外转动放大缩小功能,是一款效果非常酷的作品,作为图片轮播特效来讲,它算比较新有创意的啦,包含了图片滚动、图片放大、图片缩小、鼠标悬浮事件等功能。。。</p>
  884.             </div>
  885.             <div class=\"service-info-image\"> <img src=\"/jscss/demoimg/201402/service-07.jpg\" alt=\"Desarrollos a medida\" /> </div>
  886.           </div>
  887.         </div>
  888.       </li>
  889.     </ul>
  890.   </div>
  891. </div>
  892. <script type=\"text/javascript\" src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
  893. <script src=\"/ajaxjs/jquery-ui-1.8.20.min.js\"></script>
  894. <script>
  895. $(function(){
  896.     $(\'a[data-fade]\').click(function(e){
  897.         $(\'
    \'
    ).prependTo(\'body\').fadeIn(function(){
  898.             return true;
  899.         });
  900.     })
  901.     if ($(\'.select-wrapper\').size () > 0) {
  902.         $(\'.select-wrapper:not(.wide) select\').selectmenu({
  903.             transferClasses: true,
  904.             menuWidth: 154
  905.         });
  906.         $(\'.select-wrapper.wide select\').selectmenu({
  907.             transferClasses: true,
  908.             menuWidth: 214
  909.         });
  910.     }
  911.     $(\'.site-nav li:not(.active)\').hover(function(){
  912.         $(this).children(\'span\').stop(true, true).fadeIn();
  913.         $(this).children(\'a\').stop(true, true).animate({ color: \'#fff\' });
  914.     }, function(){
  915.         $(this).children(\'span\').stop(true, true).fadeOut();
  916.         $(this).children(\'a\').stop(true, true).animate({ color: \'#1ba7da\' });
  917.     });
  918.     if ($(\'#home-slider\').size() > 0) {
  919.         $(\'#home-slider\').plusSlider({
  920.             autoPlay: true,
  921.             displayTime: 4000,
  922.             createPagination: false,
  923.             keyboardNavigation: false,
  924.             sliderType: \'fader\',
  925.             pauseOnHover: false
  926.         });
  927.         $(\'\').appendTo(\'.plusSlider .arrow\');
  928.     }
  929.     $(\'.jcarousel-prev, .plusSlider .arrow.prev\').hover(function(){
  930.         if($(this).attr(\'disabled\') != \'disabled\') {
  931.             $(this).children().stop(true, true).animate({\'left\' : -10});
  932.         }
  933.     }, function(){
  934.         $(this).children().stop(true, true).animate({\'left\' : 0});
  935.     });
  936.     $(\'.jcarousel-next, .plusSlider .arrow.next\').hover(function(){
  937.         if($(this).attr(\'disabled\') != \'disabled\') {
  938.             $(this).children().stop(true, true).animate({\'left\' : 10});
  939.         }
  940.     }, function(){
  941.         $(this).children().stop(true, true).animate({\'left\' : 0});
  942.     });
  943.     if ($(\'.products-category:not(.single)\').size() > 0) {
  944.         $(\'.products-category\').jcarousel({
  945.             buttonNextHTML: \'Next\',
  946.             buttonPrevHTML: \'Previous\',
  947.             scroll: 4
  948.         });
  949.         optionIndex = $(\'select.products-categories option:selected\').index();
  950.         $(\'.jcarousel-container:eq(\' + optionIndex + \')\').addClass(\'active\');
  951.         $(\'.jcarousel-container:not(.active)\').hide();
  952.         $(\'select.products-categories\').change(function(){
  953.             optionIndex = $(this).children(\':selected\').index();
  954.             $(\'.jcarousel-container.active\').fadeOut(function(){
  955.                 $(this).removeClass(\'active\');
  956.                 $(\'.jcarousel-container:eq(\' + optionIndex + \')\').fadeIn(function(){
  957.                     $(this).addClass(\'active\');
  958.                 });
  959.             });
  960.         });
  961.     }
  962.     $(\'.products-item\').mouseenter(function(){
  963.         $item = $(this);
  964.         $item.find(\'.product-image-hover\').stop(true, true).fadeIn();
  965.     }).mouseleave(function(){
  966.         $item = $(this);
  967.         $item.find(\'.product-image-hover\').stop(true, true).fadeOut();
  968.     });
  969.     $(\'.products-item\').find(\'.product-info-icon, .product-image-hover\').click(function(){
  970.         $container = $(this).closest(\'.products-item\');
  971.         $icon = $container.find(\'.product-info-icon\');
  972.         if(!$icon.hasClass(\'active\')) {
  973.             $icon.stop(true, true).animate({ \'bottom\' : 62 }).addClass(\'active\').animate({ \'bottom\' : 24 });
  974.             if ($container.parent().hasClass(\'single\')) {
  975.                 contentHeight = 72;
  976.             } else {
  977.                 contentHeight = 106;
  978.             }
  979.             $container.find(\'.product-info-wrapper\').children(\'.product-info\').stop(true, true).animate({ \'height\' : contentHeight });
  980.         } else {
  981.             if ($(this).hasClass(\'product-info-icon\')) {
  982.                 $icon.stop(true, true).animate({ \'bottom\' : 62 }).removeClass(\'active\').animate({ \'bottom\' : 30 });
  983.                 $container.find(\'.product-info-wrapper\').children(\'.product-info\').stop(true, true).animate({ \'height\' : 8 });
  984.             }
  985.         }
  986.     });
  987.     $(\'.select-product\').click(function(e){
  988.         $product = $(this).closest(\'.products-item\');
  989.         $.cookie(\'selected_category\', $(\'.selectmenu.products-categories\').val(), \'/\');
  990.         $.cookie(\'selected_product\', $product.data(\'product-id\'), \'/\');
  991.     });
  992.     if ($(\'.services-list\').size() > 0) {
  993.         $(\'.services-list\').accordion({
  994.             autoHeight: false,
  995.             create: function (event, ui) {
  996.                 $(\'.services-list li:first h2 span\').addClass(\'active\');
  997.             },
  998.             changestart: function (event, ui) {
  999.                 ui.oldHeader.children(\'span\').animate({ \'left\' : 561 }, function () {
  1000.                     $(this).removeClass(\'active\').animate({ \'left\' : 600 });
  1001.                 });
  1002.                 ui.newHeader.children(\'span\').stop(true, true).animate({ \'left\' : 561 }, function () {
  1003.                     $(this).addClass(\'active\').animate({ \'left\' : 600 });
  1004.                 });
  1005.                 return true;
  1006.             },
  1007.             change: function (event, ui) {
  1008.                 return true;
  1009.             }
  1010.         });
  1011.     }
  1012.     if ($(\'#map\').size() > 0) {
  1013.         mapInit();
  1014.     }
  1015.     $(\'.contact-form .select-wrapper.product, .contact-form .products-category, .contact-form .products-item\').hide();
  1016.     toggleProductCategory(true);
  1017.     $(\'select.products-category-selector\').change(function(){
  1018.         toggleProductCategory(false);
  1019.     });
  1020.     $(\'select.products-item-selector\').change(function(){
  1021.         toggleProductItem();
  1022.     });
  1023.     $(\'#loading-mask\').fadeOut(\'slow\', function(){
  1024.         $(this).remove();
  1025.     });
  1026. });
  1027. function toggleProductCategory (onload) {
  1028.     categorySelectedIndex = $(\'select.products-category-selector :selected\').index();
  1029.     $(\'.select-wrapper.product.active\').hide().removeClass(\'active\');
  1030.     $(\'.select-wrapper.product:eq(\' + categorySelectedIndex + \')\').show().addClass(\'active\');
  1031.     $(\'.products-category.active\').fadeOut().removeClass(\'active\').children(\'li.active\').fadeOut().removeClass(\'active\');
  1032.     $(\'.products-category:eq(\' + (categorySelectedIndex - 1) + \')\').fadeIn(function(){
  1033.         $(this).addClass(\'active\');
  1034.         toggleProductItem();
  1035.     });
  1036.     return true;
  1037. }
  1038. function toggleProductItem (onload) {
  1039.     categorySelectedIndex = $(\'.products-category-selector :selected\').index();
  1040.     productSelectedIndex = $(\'.select-wrapper.product.active select :selected\').index();
  1041.     if (productSelectedIndex > 0) {
  1042.         $(\'.products-category.active .products-item.active\').fadeOut().removeClass(\'active\');
  1043.         $(\'.products-category.active .products-item:eq(\' + (productSelectedIndex - 1) + \')\').fadeIn().addClass(\'active\');
  1044.     }
  1045. }
  1046. function mapInit () {
  1047.     var latlng = new google.maps.LatLng(-34.462737, -58.524939);
  1048.     var myOptions = {
  1049.         zoom: 16,
  1050.         center: latlng,
  1051.         mapTypeId: google.maps.MapTypeId.ROADMAP
  1052.     };
  1053.     var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);
  1054.     var image = \'img/map_marker.png\';
  1055.     var beachMarker = new google.maps.Marker({
  1056.         position: latlng,
  1057.         map: map,
  1058.         icon: image
  1059.     });
  1060. }
  1061. </script>
  1062. <div style=\"text-align:center;clear:both\">
  1063. </div>
  1064. </body>
  1065. </html>

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29737856/viewspace-1210349/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-07-04

  • 博文量
    95
  • 访问量
    122213