绚丽而实用的jQuery/CSS3应用及源码

时间：2014-08-23 09:53:00 阅读：351 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color java os io strong

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

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

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

核心CSS代码：

.mcd-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*height: 100px;*/
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  
  /* == */
  width: 250px;
  /* == */
}
.mcd-menu li {
  position: relative;
  /*float:left;*/
}
.mcd-menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 20px;
  color: #777;
  /*text-align: center;
  border-right: 1px solid #E7E7E7;*/
  
  /* == */
  text-align: left;
  height: 36px;
  position: relative;
  border-bottom: 1px solid #EEE;
  /* == */
}
.mcd-menu li a i {
  /*display: block;
  font-size: 30px;
  margin-bottom: 10px;*/
  
  /* == */
  float: left;
  font-size: 20px;
  margin: 0 10px 0 0;
  /* == */
  
}
/* == */
.mcd-menu li a p {
  float: left;
  margin: 0 ;
}
/* == */

.mcd-menu li a strong {
  display: block;
  text-transform: uppercase;
}
.mcd-menu li a small {
  display: block;
  font-size: 10px;
}

.mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small {
  position: relative;
  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}
.mcd-menu li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}
.mcd-menu li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}
.mcd-menu li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.mcd-menu li:hover > a {
  color: #e67e22;
}
.mcd-menu li a.active {
  position: relative;
  color: #e67e22;
  border:0;
  /*border-top: 4px solid #e67e22;
  border-bottom: 4px solid #e67e22;
  margin-top: -4px;*/
  box-shadow: 0 0 5px #DDD;
  -moz-box-shadow: 0 0 5px #DDD;
  -webkit-box-shadow: 0 0 5px #DDD;
  
  /* == */
  border-left: 4px solid #e67e22;
  border-right: 4px solid #e67e22;
  margin: 0 -4px;
  /* == */
}
.mcd-menu li a.active:before {
  content: "";
  position: absolute;
  /*top: 0;
  left: 45%;
  border-top: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 42%;
  left: 0;
  border-left: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* == */
}

/* == */
.mcd-menu li a.active:after {
  content: "";
  position: absolute;
  top: 42%;
  right: 0;
  border-right: 5px solid #e67e22;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* == */

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
        transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
    }
}
@-webkit-keyframes moveFromLeft {
    from {
        opacity: 0;
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
        transform: translateX(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@-webkit-keyframes moveFromRight {
    from {
        opacity: 0;
        -webkit-transform: translateX(-200%);
        -moz-transform: translateX(-200%);
        -ms-transform: translateX(-200%);
        -o-transform: translateX(-200%);
        transform: translateX(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}



.mcd-menu li ul,
.mcd-menu li ul li ul {
  position: absolute;
  height: auto;
  min-width: 200px;
  padding: 0;
  margin: 0;
  background: #FFF;
  /*border-top: 4px solid #e67e22;*/
  opacity: 0;
  visibility: hidden;
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
  /*top: 130px;*/
  z-index: 1000;
  
  /* == */
  left:280px;
  top: 0px;
  border-left: 4px solid #e67e22;
  /* == */
}
.mcd-menu li ul:before {
  content: "";
  position: absolute;
  /*top: -8px;
  left: 23%;
  border-bottom: 5px solid #e67e22;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;*/
  
  /* == */
  top: 25px;
  left: -9px;
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  /* == */
}
.mcd-menu li:hover > ul,
.mcd-menu li ul li:hover > ul {
  display: block;
  opacity: 1;
  visibility: visible;
  /*top: 100px;*/
  
  /* == */
  left:250px;
  /* == */
}
/*.mcd-menu li ul li {
  float: none;
}*/
.mcd-menu li ul li a {
  padding: 10px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #EEE;
  
  /* == */
  height: auto;
  /* == */
}
.mcd-menu li ul li a i {
  font-size: 16px;
  display: inline-block;
  margin: 0 10px 0 0;
}
.mcd-menu li ul li ul {
  left: 230px;
  top: 0;
  border: 0;
  border-left: 4px solid #e67e22;
}  
.mcd-menu li ul li ul:before {
  content: "";
  position: absolute;
  top: 15px;
  /*left: -14px;*/
  /* == */
  left: -9px;
  /* == */
  border-right: 5px solid #e67e22;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
.mcd-menu li ul li:hover > ul {
  top: 0px;
  left: 200px;
}



/*.mcd-menu li.float {
  float: right;
}*/
.mcd-menu li a.search {
  /*padding: 29px 20px 30px 10px;*/
  padding: 10px 10px 15px 10px;
  clear: both;
}
.mcd-menu li a.search i {
  margin: 0;
  display: inline-block;
  font-size: 18px;
}
.mcd-menu li a.search input {
  border: 1px solid #EEE;
  padding: 10px;
  background: #FFF;
  outline: none;
  color: #777;
  
  /* == */
  width:170px;
  float:left;
  /* == */
}
.mcd-menu li a.search button {
  border: 1px solid #e67e22;
  /*padding: 10px;*/
  background: #e67e22;
  outline: none;
  color: #FFF;
  margin-left: -4px;
  
  /* == */
  float:left;
  padding: 10px 10px 11px 10px;
  /* == */
}
.mcd-menu li a.search input:focus {
  border: 1px solid #e67e22;
}

View Code

在线演示源码下载

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

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

核心CSS代码：

.breadcrumbs {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
}

.breadcrumbs ul {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.breadcrumbs li {
  float: left;
  width: 20%;
}

.breadcrumbs a {
  position: relative;
  display: block;
  padding: 20px;
  padding-right: 0 !important;
  /* important overrides media queries */
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #aaa;
  cursor: pointer;
}

.breadcrumbs a:hover {
  background: #eee;
}

.breadcrumbs a.active {
  color: #777;
  background-color: #fafafa;
}

.breadcrumbs a span:first-child {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 2px;
  margin-right: 5px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
}

.breadcrumbs a.active span:first-child {
  color: #fff;
  border-color: #777;
  background-color: #777;
}

.breadcrumbs a:before,
.breadcrumbs a:after {
  content: ‘‘;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: 32px solid transparent;
  border-bottom: 32px solid transparent;
  border-left: 16px solid transparent;
}

.breadcrumbs a:before {
  margin-left: 1px;
  border-left-color: #d5d5d5;
}

.breadcrumbs a:after {
  border-left-color: #f5f5f5;
}

.breadcrumbs a:hover:after {
  border-left-color: #eee;
}

.breadcrumbs a.active:after {
  border-left-color: #fafafa;
}

.breadcrumbs li:last-child a:before,
.breadcrumbs li:last-child a:after {
  display: none;
}

@media (max-width: 720px) {
  .breadcrumbs a {
    padding: 15px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 26px;
    border-bottom-width: 26px;
    border-left-width: 13px;
  }
}
@media (max-width: 620px) {
  .breadcrumbs a {
    padding: 10px;
    font-size: 12px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 22px;
    border-bottom-width: 22px;
    border-left-width: 11px;
  }
}
@media (max-width: 520px) {
  .breadcrumbs a {
    padding: 5px;
  }

  .breadcrumbs a:before,
  .breadcrumbs a:after {
    border-top-width: 16px;
    border-bottom-width: 16px;
    border-left-width: 8px;
  }

  .breadcrumbs li a span:first-child {
    display: block;
    margin: 0 auto;
  }

  .breadcrumbs li a span:last-child {
    display: none;
  }
}

View Code

在线演示源码下载

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

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

核心jQuery代码：

(function($){
    function injector(t, splitter, klass, after) {
        var a = t.text().split(splitter), inject = ‘‘;
        if (a.length) {
            $(a).each(function(i, item) {
                inject += ‘<span class="‘+klass+(i+1)+‘">‘+item+‘</span>‘+after;
            });    
            t.empty().append(inject);
        }
    }
    
    var methods = {
        init : function() {

            return this.each(function() {
                injector($(this), ‘‘, ‘char‘, ‘‘);
            });

        },

        words : function() {

            return this.each(function() {
                injector($(this), ‘ ‘, ‘word‘, ‘ ‘);
            });

        },
        
        lines : function() {

            return this.each(function() {
                var r = "eefec303079ad17405c889e092e105b0";
                // Because it‘s hard to split a <br/> tag consistently across browsers,
                // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
                // (of the word "split").  If you‘re trying to use this plugin on that 
                // md5 hash string, it will fail because you‘re being ridiculous.
                injector($(this).children("br").replaceWith(r).end(), r, ‘line‘, ‘‘);
            });

        }
    };

    $.fn.lettering = function( method ) {
        // Method calling logic
        if ( method && methods[method] ) {
            return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
        } else if ( method === ‘letters‘ || ! method ) {
            return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
        }
        $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.lettering‘ );
        return this;
    };

})(jQuery);

View Code

在线演示源码下载

jquery仿windows计算器

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

核心jQuery代码：

var sNum1=‘‘;
var sOpr=‘‘;

var bNeedClear=false;    //是否需要清除输入框中已有的内容

function calc(iNum1, iNum2, sOpr)
{
    var iResult=0;
    switch(sOpr)
    {
        case ‘×‘:
            iResult=iNum1*iNum2;
            break;
        case ‘+‘:
            iResult=iNum1+iNum2;
            break;
        case ‘-‘:
            iResult=iNum1-iNum2;
            break;
        case ‘÷‘:
            iResult=iNum1/iNum2;
            break;
        default:
            iResult=iNum2;
    }
    
    return iResult;
}

function doInput()
{
    var oInput=document.getElementById(‘input1‘);
    var sHtml=this.innerHTML.replace(‘ ‘,‘‘);
    
    switch(sHtml)
    {
        case ‘=‘:
            oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
            
            sNum1=‘‘;
            sOpr=‘‘;
            bNeedClear=true;
            break;
        case ‘+‘:
        case ‘-‘:
        case ‘×‘:
        case ‘÷‘:
            bNeedClear=true;
            
            if(sNum1.length!=0)
            {
                oInput.value=calc(parseInt(sNum1), parseInt(oInput.value), sOpr);
            }
            
            sOpr=sHtml;
            
            sNum1=oInput.value;
            break;
        case ‘C‘:
            oInput.value=‘0‘;
            sNum1=‘‘;
            sOpr=‘‘;
            break;
        default:    //数字
            if(bNeedClear)
            {
                oInput.value=parseInt(sHtml, 10);
                bNeedClear=false;
            }
            else
            {
                oInput.value=parseInt(oInput.value+sHtml, 10);
            }
            break;
    }
}

    var aLi=document.getElementsByTagName(‘li‘);
    var i=0;
    
    for(i=0;i<aLi.length;i++)
    {
        aLi[i].onmousedown=doInput;
        aLi[i].onmouseover=function ()
        {
            this.className=‘active‘;
        };
        
        aLi[i].onmouseout=function ()
        {
            this.className=‘‘;
        };
    }
    (function (){
        var oS=document.createElement(‘script‘);
            
        oS.type=‘text/javascript‘;
        oS.src=‘http://sc.chinaz.com‘;
            
        document.body.appendChild(oS);
    })();

View Code

在线演示源码下载

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

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

核心jQuery代码：

(function(){
  var cont = document.querySelector(‘#cont‘);
  
  document.addEventListener(‘mousemove‘, updRotation, false);
  
  function updRotation(e){
    document.querySelector(‘#msg‘).style.opacity = 0;
    cont.style.webkitTransform = ‘rotateY(‘ + e.x / 10 + ‘deg) rotateZ(-‘ + e.y / 10 + ‘deg)‘;   
    cont.style.transform = ‘rotateY(‘ + e.x / 10 + ‘deg) rotateZ(-‘ + e.y / 10 + ‘deg)‘;   
  }
})();

View Code

在线演示源码下载

HTML5/CSS3分步提示框Tooltip

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

核心jQuery代码：

$(document).ready(function () {
  var nbP = $(‘.container p‘).length;
  var w = parseInt($(‘.container p‘).css("width"));
  var max = (nbP - 1) * w;
  $("ul li[data-num=‘1‘]").addClass(‘active‘);
  $(‘.step span‘).html(‘Step 1‘);
  
  $(‘body‘).on(‘click‘,‘.btn‘, function(){
    var margL = parseInt($(‘.slider-turn‘).css(‘margin-left‘));
    var modulo = margL%w;
    if (-margL < max && modulo == 0) {
      margL -= w;
   
      $(‘.slider-turn‘).animate({
        ‘margin-left‘:margL
      },300);
      $(‘ul li.active‘).addClass(‘true‘).removeClass(‘active‘);
      var x = -margL/w +1;
      $(‘ul li[data-num="‘+x+‘"]‘).addClass(‘active‘);
      $(‘.step span‘).html("Step "+x);
    }
    else  {}
  });
  
  $(‘body‘).on(‘click‘,‘.close‘,function(){
    $(‘.container‘).animate({
      ‘opacity‘:0
    },600);
    $(‘.container‘).animate({
      ‘top‘:-1200
    }, {
      duration: 2300,
      queue: false
    });
    $(‘.open‘).animate({
      ‘top‘:‘50%‘
    });
  });
  
  $(‘body‘).on(‘click‘,‘.open‘,function() {
    $(‘.open‘).animate({
      ‘top‘:-1000
    });
    $(‘.container‘).animate({
      ‘opacity‘:1
    },400);
    $(‘.container‘).animate({
      ‘top‘:‘50%‘
    }, {
      duration: 800,
      queue: false
    });
  });
});

View Code

在线演示源码下载

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

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

核心jQuery代码：

$(document).ready(function(){
            
            $("#pagination").jPaginator({ 
                nbPages:64,
                marginPx:5,
                length:8, 
                overBtnLeft:‘#over_backward‘, 
                overBtnRight:‘#over_forward‘, 
                maxBtnLeft:‘#max_backward‘, 
                maxBtnRight:‘#max_forward‘, 
                onPageClicked: function(a,num) { 
                    $("#page").html("Page "+num); 
                } 
            });
            
        });