首页 > 代码库 > 绚丽而实用的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;}
在线演示 源码下载
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; }}
在线演示 源码下载
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);
在线演示 源码下载
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); })();
在线演示 源码下载
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)‘; }})();
在线演示 源码下载
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 }); });});
在线演示 源码下载
精美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); } }); });
在线演示 源码下载
绚丽而实用的jQuery/CSS3应用及源码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。