HTML5加入WEB以后，网页世界就变得丰富绚丽起来了，但是我们在项目应用中，不仅需要绚丽的动画效果，而且更需要有实用的价值。今天分享的一些jQuery/CSS3应用不仅绚丽，而且还比较实用，如果感兴趣，可以应用到自己的项目中。

纯CSS3垂直动画菜单 效果很酷

这是很动感的CSS3动画菜单，垂直方向的，并且支持多级下拉。

核心CSS代码：

  1. .mcd-menu {
  2.   list-style: none;
  3.   padding:;
  4.   margin:;
  5.   background: #FFF;
  6.   /*height: 100px;*/
  7.   border-radius: 2px;
  8.   -moz-border-radius: 2px;
  9.   -webkit-border-radius: 2px;
  10.  
  11.   /* == */
  12.   width: 250px;
  13.   /* == */
  14. }
  15. .mcd-menu li {
  16.   position: relative;
  17.   /*float:left;*/
  18. }
  19. .mcd-menu li a {
  20.   display: block;
  21.   text-decoration: none;
  22.   padding: 12px 20px;
  23.   color: #777;
  24.   /*text-align: center;
  25.   border-right: 1px solid #E7E7E7;*/
  26.  
  27.   /* == */
  28.   text-align: left;
  29.   height: 36px;
  30.   position: relative;
  31.   border-bottom: 1px solid #EEE;
  32.   /* == */
  33. }
  34. .mcd-menu li a i {
  35.   /*display: block;
  36.   font-size: 30px;
  37.   margin-bottom: 10px;*/
  38.  
  39.   /* == */
  40.   float: left;
  41.   font-size: 20px;
  42.   margin: 0 10px 0 0;
  43.   /* == */
  44.  
  45. }
  46. /* == */
  47. .mcd-menu li a p {
  48.   float: left;
  49.   margin: 0 ;
  50. }
  51. /* == */
  52.  
  53. .mcd-menu li a strong {
  54.   display: block;
  55.   text-transform: uppercase;
  56. }
  57. .mcd-menu li a small {
  58.   display: block;
  59.   font-size: 10px;
  60. }
  61.  
  62. .mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  63.   position: relative;
  64.  
  65.   transition: all 300ms linear;
  66.   -o-transition: all 300ms linear;
  67.   -ms-transition: all 300ms linear;
  68.   -moz-transition: all 300ms linear;
  69.   -webkit-transition: all 300ms linear;
  70. }
  71. .mcd-menu li:hover > a i {
  72.     opacity:;
  73.     -webkit-animation: moveFromTop 300ms ease-in-out;
  74.     -moz-animation: moveFromTop 300ms ease-in-out;
  75.     -ms-animation: moveFromTop 300ms ease-in-out;
  76.     -o-animation: moveFromTop 300ms ease-in-out;
  77.     animation: moveFromTop 300ms ease-in-out;
  78. }
  79. .mcd-menu li:hover a strong {
  80.     opacity:;
  81.     -webkit-animation: moveFromLeft 300ms ease-in-out;
  82.     -moz-animation: moveFromLeft 300ms ease-in-out;
  83.     -ms-animation: moveFromLeft 300ms ease-in-out;
  84.     -o-animation: moveFromLeft 300ms ease-in-out;
  85.     animation: moveFromLeft 300ms ease-in-out;
  86. }
  87. .mcd-menu li:hover a small {
  88.     opacity:;
  89.     -webkit-animation: moveFromRight 300ms ease-in-out;
  90.     -moz-animation: moveFromRight 300ms ease-in-out;
  91.     -ms-animation: moveFromRight 300ms ease-in-out;
  92.     -o-animation: moveFromRight 300ms ease-in-out;
  93.     animation: moveFromRight 300ms ease-in-out;
  94. }
  95.  
  96. .mcd-menu li:hover > a {
  97.   color: #e67e22;
  98. }
  99. .mcd-menu li a.active {
  100.   position: relative;
  101.   color: #e67e22;
  102.   border:;
  103.   /*border-top: 4px solid #e67e22;
  104.   border-bottom: 4px solid #e67e22;
  105.   margin-top: -4px;*/
  106.   box-shadow: 0 0 5px #DDD;
  107.   -moz-box-shadow: 0 0 5px #DDD;
  108.   -webkit-box-shadow: 0 0 5px #DDD;
  109.  
  110.   /* == */
  111.   border-left: 4px solid #e67e22;
  112.   border-right: 4px solid #e67e22;
  113.   margin: 0 -4px;
  114.   /* == */
  115. }
  116. .mcd-menu li a.active:before {
  117.   content: "";
  118.   position: absolute;
  119.   /*top: 0;
  120.   left: 45%;
  121.   border-top: 5px solid #e67e22;
  122.   border-left: 5px solid transparent;
  123.   border-right: 5px solid transparent;*/
  124.  
  125.   /* == */
  126.   top: 42%;
  127.   left:;
  128.   border-left: 5px solid #e67e22;
  129.   border-top: 5px solid transparent;
  130.   border-bottom: 5px solid transparent;
  131.   /* == */
  132. }
  133.  
  134. /* == */
  135. .mcd-menu li a.active:after {
  136.   content: "";
  137.   position: absolute;
  138.   top: 42%;
  139.   right:;
  140.   border-right: 5px solid #e67e22;
  141.   border-top: 5px solid transparent;
  142.   border-bottom: 5px solid transparent;
  143. }
  144. /* == */
  145.  
  146. @-webkit-keyframes moveFromTop {
  147.     from {
  148.         opacity:;
  149.         -webkit-transform: translateY(200%);
  150.         -moz-transform: translateY(200%);
  151.         -ms-transform: translateY(200%);
  152.         -o-transform: translateY(200%);
  153.         transform: translateY(200%);
  154.     }
  155.     to {
  156.         opacity:;
  157.         -webkit-transform: translateY(0%);
  158.         -moz-transform: translateY(0%);
  159.         -ms-transform: translateY(0%);
  160.         -o-transform: translateY(0%);
  161.         transform: translateY(0%);
  162.     }
  163. }
  164. @-webkit-keyframes moveFromLeft {
  165.     from {
  166.         opacity:;
  167.         -webkit-transform: translateX(200%);
  168.         -moz-transform: translateX(200%);
  169.         -ms-transform: translateX(200%);
  170.         -o-transform: translateX(200%);
  171.         transform: translateX(200%);
  172.     }
  173.     to {
  174.         opacity:;
  175.         -webkit-transform: translateX(0%);
  176.         -moz-transform: translateX(0%);
  177.         -ms-transform: translateX(0%);
  178.         -o-transform: translateX(0%);
  179.         transform: translateX(0%);
  180.     }
  181. }
  182. @-webkit-keyframes moveFromRight {
  183.     from {
  184.         opacity:;
  185.         -webkit-transform: translateX(-200%);
  186.         -moz-transform: translateX(-200%);
  187.         -ms-transform: translateX(-200%);
  188.         -o-transform: translateX(-200%);
  189.         transform: translateX(-200%);
  190.     }
  191.     to {
  192.         opacity:;
  193.         -webkit-transform: translateX(0%);
  194.         -moz-transform: translateX(0%);
  195.         -ms-transform: translateX(0%);
  196.         -o-transform: translateX(0%);
  197.         transform: translateX(0%);
  198.     }
  199. }
  200.  
  201. .mcd-menu li ul,
  202. .mcd-menu li ul li ul {
  203.   position: absolute;
  204.   height: auto;
  205.   min-width: 200px;
  206.   padding:;
  207.   margin:;
  208.   background: #FFF;
  209.   /*border-top: 4px solid #e67e22;*/
  210.   opacity:;
  211.   visibility: hidden;
  212.   transition: all 300ms linear;
  213.   -o-transition: all 300ms linear;
  214.   -ms-transition: all 300ms linear;
  215.   -moz-transition: all 300ms linear;
  216.   -webkit-transition: all 300ms linear;
  217.   /*top: 130px;*/
  218.   z-index:;
  219.  
  220.   /* == */
  221.   left:280px;
  222.   top: 0px;
  223.   border-left: 4px solid #e67e22;
  224.   /* == */
  225. }
  226. .mcd-menu li ul:before {
  227.   content: "";
  228.   position: absolute;
  229.   /*top: -8px;
  230.   left: 23%;
  231.   border-bottom: 5px solid #e67e22;
  232.   border-left: 5px solid transparent;
  233.   border-right: 5px solid transparent;*/
  234.  
  235.   /* == */
  236.   top: 25px;
  237.   left: -9px;
  238.   border-right: 5px solid #e67e22;
  239.   border-bottom: 5px solid transparent;
  240.   border-top: 5px solid transparent;
  241.   /* == */
  242. }
  243. .mcd-menu li:hover > ul,
  244. .mcd-menu li ul li:hover > ul {
  245.   display: block;
  246.   opacity:;
  247.   visibility: visible;
  248.   /*top: 100px;*/
  249.  
  250.   /* == */
  251.   left:250px;
  252.   /* == */
  253. }
  254. /*.mcd-menu li ul li {
  255.   float: none;
  256. }*/
  257. .mcd-menu li ul li a {
  258.   padding: 10px;
  259.   text-align: left;
  260.   border:;
  261.   border-bottom: 1px solid #EEE;
  262.  
  263.   /* == */
  264.   height: auto;
  265.   /* == */
  266. }
  267. .mcd-menu li ul li a i {
  268.   font-size: 16px;
  269.   display: inline-block;
  270.   margin: 0 10px 0 0;
  271. }
  272. .mcd-menu li ul li ul {
  273.   left: 230px;
  274.   top:;
  275.   border:;
  276.   border-left: 4px solid #e67e22;
  277. }
  278. .mcd-menu li ul li ul:before {
  279.   content: "";
  280.   position: absolute;
  281.   top: 15px;
  282.   /*left: -14px;*/
  283.   /* == */
  284.   left: -9px;
  285.   /* == */
  286.   border-right: 5px solid #e67e22;
  287.   border-bottom: 5px solid transparent;
  288.   border-top: 5px solid transparent;
  289. }
  290. .mcd-menu li ul li:hover > ul {
  291.   top: 0px;
  292.   left: 200px;
  293. }
  294.  
  295. /*.mcd-menu li.float {
  296.   float: right;
  297. }*/
  298. .mcd-menu li a.search {
  299.   /*padding: 29px 20px 30px 10px;*/
  300.   padding: 10px 10px 15px 10px;
  301.   clear: both;
  302. }
  303. .mcd-menu li a.search i {
  304.   margin:;
  305.   display: inline-block;
  306.   font-size: 18px;
  307. }
  308. .mcd-menu li a.search input {
  309.   border: 1px solid #EEE;
  310.   padding: 10px;
  311.   background: #FFF;
  312.   outline: none;
  313.   color: #777;
  314.  
  315.   /* == */
  316.   width:170px;
  317.   float:left;
  318.   /* == */
  319. }
  320. .mcd-menu li a.search button {
  321.   border: 1px solid #e67e22;
  322.   /*padding: 10px;*/
  323.   background: #e67e22;
  324.   outline: none;
  325.   color: #FFF;
  326.   margin-left: -4px;
  327.  
  328.   /* == */
  329.   float:left;
  330.   padding: 10px 10px 11px 10px;
  331.   /* == */
  332. }
  333. .mcd-menu li a.search input:focus {
  334.   border: 1px solid #e67e22;
  335. }

在线演示        源码下载

CSS3响应式面包屑菜单 菜单简洁大气

这是一款面包屑菜单，基于CSS3的，外观比较大气，你也可以在这里看到更多的CSS3菜单

核心CSS代码：

  1. .breadcrumbs {
  2.   border-top: 1px solid #ddd;
  3.   border-bottom: 1px solid #ddd;
  4.   background-color: #f5f5f5;
  5. }
  6.  
  7. .breadcrumbs ul {
  8.   border-left: 1px solid #ddd;
  9.   border-right: 1px solid #ddd;
  10. }
  11.  
  12. .breadcrumbs li {
  13.   float: left;
  14.   width: 20%;
  15. }
  16.  
  17. .breadcrumbs a {
  18.   position: relative;
  19.   display: block;
  20.   padding: 20px;
  21.   padding-right: 0 !important;
  22.   /* important overrides media queries */
  23.   font-size: 13px;
  24.   font-weight: bold;
  25.   text-align: center;
  26.   color: #aaa;
  27.   cursor: pointer;
  28. }
  29.  
  30. .breadcrumbs a:hover {
  31.   background: #eee;
  32. }
  33.  
  34. .breadcrumbs a.active {
  35.   color: #777;
  36.   background-color: #fafafa;
  37. }
  38.  
  39. .breadcrumbs a span:first-child {
  40.   display: inline-block;
  41.   width: 22px;
  42.   height: 22px;
  43.   padding: 2px;
  44.   margin-right: 5px;
  45.   border: 2px solid #aaa;
  46.   border-radius: 50%;
  47.   background-color: #fff;
  48. }
  49.  
  50. .breadcrumbs a.active span:first-child {
  51.   color: #fff;
  52.   border-color: #777;
  53.   background-color: #777;
  54. }
  55.  
  56. .breadcrumbs a:before,
  57. .breadcrumbs a:after {
  58.   content: '';
  59.   position: absolute;
  60.   top:;
  61.   left: 100%;
  62.   z-index:;
  63.   display: block;
  64.   width:;
  65.   height:;
  66.   border-top: 32px solid transparent;
  67.   border-bottom: 32px solid transparent;
  68.   border-left: 16px solid transparent;
  69. }
  70.  
  71. .breadcrumbs a:before {
  72.   margin-left: 1px;
  73.   border-left-color: #d5d5d5;
  74. }
  75.  
  76. .breadcrumbs a:after {
  77.   border-left-color: #f5f5f5;
  78. }
  79.  
  80. .breadcrumbs a:hover:after {
  81.   border-left-color: #eee;
  82. }
  83.  
  84. .breadcrumbs a.active:after {
  85.   border-left-color: #fafafa;
  86. }
  87.  
  88. .breadcrumbs li:last-child a:before,
  89. .breadcrumbs li:last-child a:after {
  90.   display: none;
  91. }
  92.  
  93. @media (max-width: 720px) {
  94.   .breadcrumbs a {
  95.     padding: 15px;
  96.   }
  97.  
  98.   .breadcrumbs a:before,
  99.   .breadcrumbs a:after {
  100.     border-top-width: 26px;
  101.     border-bottom-width: 26px;
  102.     border-left-width: 13px;
  103.   }
  104. }
  105. @media (max-width: 620px) {
  106.   .breadcrumbs a {
  107.     padding: 10px;
  108.     font-size: 12px;
  109.   }
  110.  
  111.   .breadcrumbs a:before,
  112.   .breadcrumbs a:after {
  113.     border-top-width: 22px;
  114.     border-bottom-width: 22px;
  115.     border-left-width: 11px;
  116.   }
  117. }
  118. @media (max-width: 520px) {
  119.   .breadcrumbs a {
  120.     padding: 5px;
  121.   }
  122.  
  123.   .breadcrumbs a:before,
  124.   .breadcrumbs a:after {
  125.     border-top-width: 16px;
  126.     border-bottom-width: 16px;
  127.     border-left-width: 8px;
  128.   }
  129.  
  130.   .breadcrumbs li a span:first-child {
  131.     display: block;
  132.     margin: 0 auto;
  133.   }
  134.  
  135.   .breadcrumbs li a span:last-child {
  136.     display: none;
  137.   }
  138. }

在线演示        源码下载

HTML5爱心跳动动画 用技术勾引妹子

这是一款创意的HTML5动画，跳动的爱心，是不是很可爱？

核心jQuery代码：

  1. (function($){
  2.     function injector(t, splitter, klass, after) {
  3.         var a = t.text().split(splitter), inject = '';
  4.         if (a.length) {
  5.             $(a).each(function(i, item) {
  6.                 inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
  7.             });
  8.             t.empty().append(inject);
  9.         }
  10.     }
  11.  
  12.     var methods = {
  13.         init : function() {
  14.  
  15.             return this.each(function() {
  16.                 injector($(this), '', 'char', '');
  17.             });
  18.  
  19.         },
  20.  
  21.         words : function() {
  22.  
  23.             return this.each(function() {
  24.                 injector($(this), ' ', 'word', ' ');
  25.             });
  26.  
  27.         },
  28.  
  29.         lines : function() {
  30.  
  31.             return this.each(function() {
  32.                 var r = "eefec303079ad17405c889e092e105b0";
  33.                 // Because it's hard to split a <br/> tag consistently across browsers,
  34.                 // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
  35.                 // (of the word "split").  If you're trying to use this plugin on that
  36.                 // md5 hash string, it will fail because you're being ridiculous.
  37.                 injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
  38.             });
  39.  
  40.         }
  41.     };
  42.  
  43.     $.fn.lettering = function( method ) {
  44.         // Method calling logic
  45.         if ( method && methods[method] ) {
  46.             return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
  47.         } else if ( method === 'letters' || ! method ) {
  48.             return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
  49.         }
  50.         $.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
  51.         return this;
  52.     };
  53.  
  54. })(jQuery);

在线演示        源码下载

jquery仿windows计算器

jquery简易版的计算器插件，你可以在这里看到更多的jQuery插件，挺丰富的。

核心jQuery代码：

  1. var sNum1='';
  2. var sOpr='';
  3.  
  4. var bNeedClear=false;    //是否需要清除输入框中已有的内容
  5.  
  6. function calc(iNum1, iNum2, sOpr)
  7. {
  8.     var iResult=0;
  9.     switch(sOpr)
  10.     {
  11.         case '×':
  12.             iResult=iNum1*iNum2;
  13.             break;
  14.         case '+':
  15.             iResult=iNum1+iNum2;
  16.             break;
  17.         case '-':
  18.             iResult=iNum1-iNum2;
  19.             break;
  20.         case '÷':
  21.             iResult=iNum1/iNum2;
  22.             break;
  23.         default:
  24.             iResult=iNum2;
  25.     }
  26.  
  27.     return iResult;
  28. }
  29.  
  30. function doInput()
  31. {
  32.     var oInput=document.getElementById('input1');
  33.     var sHtml=this.innerHTML.replace(' ','');
  34.  
  35.     switch(sHtml)
  36.     {
  37.         case '=':
  38.             oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
  39.  
  40.             sNum1='';
  41.             sOpr='';
  42.             bNeedClear=true;
  43.             break;
  44.         case '+':
  45.         case '-':
  46.         case '×':
  47.         case '÷':
  48.             bNeedClear=true;
  49.  
  50.             if(sNum1.length!=0)
  51.             {
  52.                 oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
  53.             }
  54.  
  55.             sOpr=sHtml;
  56.  
  57.             sNum1=oInput.value;
  58.             break;
  59.         case 'C':
  60.             oInput.value='0';
  61.             sNum1='';
  62.             sOpr='';
  63.             break;
  64.         default:    //数字
  65.             if(bNeedClear)
  66.             {
  67.                 oInput.value=parseInt(sHtml, 10);
  68.                 bNeedClear=false;
  69.             }
  70.             else
  71.             {
  72.                 oInput.value=parseInt(oInput.value+sHtml, 10);
  73.             }
  74.             break;
  75.     }
  76. }
  77.  
  78.     var aLi=document.getElementsByTagName('li');
  79.     var i=0;
  80.  
  81.     for(i=0;i<aLi.length;i++)
  82.     {
  83.         aLi[i].onmousedown=doInput;
  84.         aLi[i].onmouseover=function ()
  85.         {
  86.             this.className='active';
  87.         };
  88.  
  89.         aLi[i].onmouseout=function ()
  90.         {
  91.             this.className='';
  92.         };
  93.     }
  94.     (function (){
  95.         var oS=document.createElement('script');
  96.  
  97.         oS.type='text/javascript';
  98.         oS.src='http://sc.chinaz.com';
  99.  
  100.         document.body.appendChild(oS);
  101.     })();

在线演示        源码下载

HTML5纸带翻转动画 超炫的3D特效

这是一款很不错的HTML5 3D动画体验应用，实用性没有上面几款强。

核心jQuery代码：

  1. (function(){
  2.   var cont = document.querySelector('#cont');
  3.  
  4.   document.addEventListener('mousemove', updRotation, false);
  5.  
  6.   function updRotation(e){
  7.     document.querySelector('#msg').style.opacity = 0;
  8.     cont.style.webkitTransform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';
  9.     cont.style.transform = 'rotateY(' + e.x / 10 + 'deg) rotateZ(-' + e.y / 10 + 'deg)';
  10.   }
  11. })();

在线演示        源码下载

HTML5/CSS3分步提示框Tooltip

很炫的Tooltip插件，并且在tooltip中可以进行分步骤操作。

核心jQuery代码：

  1. $(document).ready(function () {
  2.   var nbP = $('.container p').length;
  3.   var w = parseInt($('.container p').css("width"));
  4.   var max = (nbP - 1) * w;
  5.   $("ul li[data-num='1']").addClass('active');
  6.   $('.step span').html('Step 1');
  7.  
  8.   $('body').on('click','.btn', function(){
  9.     var margL = parseInt($('.slider-turn').css('margin-left'));
  10.     var modulo = margL%w;
  11.     if (-margL < max && modulo == 0) {
  12.       margL -= w;
  13.  
  14.       $('.slider-turn').animate({
  15.         'margin-left':margL
  16.       },300);
  17.       $('ul li.active').addClass('true').removeClass('active');
  18.       var x = -margL/w +1;
  19.       $('ul li[data-num="'+x+'"]').addClass('active');
  20.       $('.step span').html("Step "+x);
  21.     }
  22.     else  {}
  23.   });
  24.  
  25.   $('body').on('click','.close',function(){
  26.     $('.container').animate({
  27.       'opacity':0
  28.     },600);
  29.     $('.container').animate({
  30.       'top':-1200
  31.     }, {
  32.       duration: 2300,
  33.       queue: false
  34.     });
  35.     $('.open').animate({
  36.       'top':'50%'
  37.     });
  38.   });
  39.  
  40.   $('body').on('click','.open',function() {
  41.     $('.open').animate({
  42.       'top':-1000
  43.     });
  44.     $('.container').animate({
  45.       'opacity':1
  46.     },400);
  47.     $('.container').animate({
  48.       'top':'50%'
  49.     }, {
  50.       duration: 800,
  51.       queue: false
  52.     });
  53.   });
  54. });

在线演示        源码下载

精美jQuery分页插件 带滑动条分页

这是一款jQuery分页插件，并且带有滑动条，方便页码数量多的分页程序。

核心jQuery代码：

  1. $(document).ready(function(){
  2.  
  3.             $("#pagination").jPaginator({
  4.                 nbPages:64,
  5.                 marginPx:5,
  6.                 length:8,
  7.                 overBtnLeft:'#over_backward',
  8.                 overBtnRight:'#over_forward',
  9.                 maxBtnLeft:'#max_backward',
  10.                 maxBtnRight:'#max_forward',
  11.                 onPageClicked: function(a,num) {
  12.                     $("#page").html("Page "+num);
  13.                 }
  14.             });
  15.  
  16.         });

在线演示        源码下载

绚丽而实用的jQuery/CSS3应用及源码的更多相关文章

  1. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  2. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  3. 非常实用的JQuery的选项卡切换源码

    <html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...

  4. 精心挑选的HTML5/CSS3应用及源码

    这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的j ...

  5. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  6. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  7. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  8. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  9. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

随机推荐

  1. 非网络引用element-ui css导致图标无法正常显示的解决办法

    https://blog.csdn.net/m0_37893932/article/details/79460652 ***************************************** ...

  2. MySQL数据库权限管理

    # MySQL数据库权限管理 ### 前言------------------------------ 对不同的用户赋予不同级别的访问权限是个好习惯- 杜绝一些恶意用户 ### 参考资料------- ...

  3. svn 版本管理与自动部分发布

    作为团队开发项目时,会遇到项目的版本管理,测试部署与发布部署,下面是摘至他人的关于版本管理和自动部署的方案. svn自动部署的实现: 使用svn的hook功能 1.在版本库的hooks目录下面,有一些 ...

  4. strcpy和memcpy的区别（转）

    转自:http://www.cnblogs.com/stoneJin/archive/2011/09/16/2179248.html strcpy和memcpy都是标准C库函数,它们有下面的特点.st ...

  5. php编写TCP服务端和客户端程序

    1.修改php.ini,打开extension=php_sockets.dll 2.服务端程序SocketServer.php <?php //确保在连接客户端时不会超时 set_time_li ...

  6. C语言 · 企业奖金发放

    算法提高 企业奖金发放   时间限制:1.0s   内存限制:512.0MB      企业发放的奖金根据利润提成.利润低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10 ...

  7. 如何在Linux下Redis安装

    转载出于:http://blog.csdn.net/jiangguilong2000/article/details/8114740 redis作为NoSQL数据库的一种应用,响应速度和命中率上还是比 ...

  8. .net dll类库 生成chm说明文档

    效果图: 制作步骤: 1.下载Sandcastle http://shfb.codeplex.com/releases/view/105809 2.下载Html Help WorkShop http: ...

  9. Java图形界面设计——substance皮肤

    http://jianweili007-163-com.iteye.com/blog/1141358 ————————————————————————————————————————————————— ...

  10. Android安装后没有完成和打开按钮

    File apkFile = new File(filePath); Intent intent = new Intent(); intent.setFlags(Intent.FLAG_ACTIVIT ...