首页 > 代码库 > 绚丽而实用的jQuery/CSS3应用及源码

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

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

pure-css3-vertical-menu

在线演示        源码下载

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

css3-responsive-bread-menu

在线演示        源码下载

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

html5-heart-beta-animation

在线演示        源码下载

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

3322

在线演示        源码下载

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-paper-roll-animation

在线演示        源码下载

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

html5-guide-tooltip

在线演示        源码下载

精美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);                 }             });                    });
View Code

jquery-page-plugin-with-bar

在线演示        源码下载

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