绚丽而实用的jQuery/CSS3应用及源码
HTML5加入WEB以后,网页世界就变得丰富绚丽起来了,但是我们在项目应用中,不仅需要绚丽的动画效果,而且更需要有实用的价值。今天分享的一些jQuery/CSS3应用不仅绚丽,而且还比较实用,如果感兴趣,可以应用到自己的项目中。
纯CSS3垂直动画菜单 效果很酷
这是很动感的CSS3动画菜单,垂直方向的,并且支持多级下拉。
核心CSS代码:
.mcd-menu {
list-style: none;
padding:;
margin:;
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:;
-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:;
-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:;
-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:;
/*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:;
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:;
border-right: 5px solid #e67e22;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* == */ @-webkit-keyframes moveFromTop {
from {
opacity:;
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
-o-transform: translateY(200%);
transform: translateY(200%);
}
to {
opacity:;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
}
@-webkit-keyframes moveFromLeft {
from {
opacity:;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
to {
opacity:;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
}
@-webkit-keyframes moveFromRight {
from {
opacity:;
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
to {
opacity:;
-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:;
margin:;
background: #FFF;
/*border-top: 4px solid #e67e22;*/
opacity:;
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:; /* == */
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:;
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:;
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:;
border:;
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:;
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:;
left: 100%;
z-index:;
display: block;
width:;
height:;
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应用及源码的更多相关文章
- 分享7款非常实用的jQuery/CSS3插件演示和源码
上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...
- 14款让前端开发者心动的jQuery/CSS3插件及源码
14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示 / 源码下载 2.jQuery QQ表情插件qqFace ...
- 非常实用的JQuery的选项卡切换源码
<html> <head> <meta charset="utf-8"> <title>简单选项卡</title> &l ...
- 精心挑选的HTML5/CSS3应用及源码
这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的j ...
- 在网站开发中很有用的8个 jQuery 效果【附源码】
jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- jQuery 2.0.3 源码分析core - 选择器
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...
随机推荐
- java 多线程 33: 多线程组件之 Callable、Future和FutureTask
Callable Callable和rRunnable差不多,两者都是为那些其实例可能被另一个线程执行的类而设计的,最主要的差别在于Runnable不会返回线程运算结果,Callable可以(假如线程 ...
- Eigen教程(7)
整理下Eigen库的教程,参考:http://eigen.tuxfamily.org/dox/index.html 归约.迭代器和广播 归约 在Eigen中,有些函数可以统计matrix/array的 ...
- ios CGRectGet...位置属性的基本介绍
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 10, 110, 150)]; label.backgroundColor ...
- ILOG JRules 和 WebSphere Process Server 集成概述
ILOG JRules 和 WebSphere Process Server 集成概述 简介 业务流程管理(Business Process Management,BPM)和业务规则管理系统(Busi ...
- 未能加载文件或程序集”xxxx”或它的某一个依赖项,试图加载格式不正确的程序。
通常是因为应用程序编译的目标平台与引用的DLL类库目标平台不一致造成的,如应用程序目标编译为64位,而引用了32位的DLL. 在Visual Studio修改应用程序目标编译平台即可. 更多关于目标编 ...
- Android——BroadcastReceiver
注释:一般广播不会被阻断,有序广播则会被阻断 注释:这是用动态注册的广播,必须要解绑 xml <?xml version="1.0" encoding="utf-8 ...
- Web Application Stress 对网站进行压力测试
打开Microsoft web Application Stress工具按下图顺序操作: 1. 2.点击Record 3. 4.在浏览器中输入要测试的URI地址 5.在设置中设置参数,如发起请求线程数 ...
- IDEA使用教程-踩得坑
最近来公司才换的IDEA,而且是mac版本的,踩了好多坑,所以想记录下来. 1. 创建Web聚合项目(Maven多模块项目) 参考多模块项目创建 2. IDEA热部署(jetty插件启动maven项目 ...
- MFC中的句柄
1.引出句柄 CDC问题:1.CDC dc;dc.LineTo(point);无法运行 2.CDC *dc=GetDC();dc->LineTo(point);就可以运行了 MFC中有大量的句柄 ...
- [spark] spark安装和基础使用
[下载] 注意选择spark版本时,与hadoop的版本要搭配 http://spark.apache.org/downloads.html [安装]