以下是 手机右上角圆角动画导航代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为手机右上角圆角动画导航代码，属于站长常用代码" />
<title>手机右上角圆角动画导航代码</title>
<!--
<link href='http://fonts.useo.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
-->
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/velocity.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<nav>
<ul class="cd-primary-nav">
<li><a href="#0">The team</a></li>
<li><a href="#0">Our services</a></li>
<li><a href="#0">Our projects</a></li>
<li><a href="#0">Start a project</a></li>
<li><a href="#0">Join In</a></li>
<li><a href="#" target="_blank">Create an account</a></li>
</ul>
</nav>
<main class="cd-content">
<!-- your content here -->
<div class="cd-intro">
<h1>手机右上角圆角动画导航代码</h1>
</div>
</main> <!-- cd-content -->
<div class="cd-overlay-nav">
<span></span>
</div> <!-- cd-overlay-nav -->
<div class="cd-overlay-content">
<span></span>
</div> <!-- cd-overlay-content -->
<a href="#0" class="cd-nav-trigger">Menu<span class="cd-icon"></span></a>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<!-- 代码 结束 -->
</body>
</html>
JS代码(main.js):
jQuery(document).ready(function($){
var overlayNav = $('.cd-overlay-nav'),overlayContent = $('.cd-overlay-content'),navigation = $('.cd-primary-nav'),toggleNav = $('.cd-nav-trigger');
//inizialize navigation and content layerslayerInit();
$(window).on('resize',function(){
window.requestAnimationFrame(layerInit);
}
);
//open/close the menu and cover layerstoggleNav.on('click',function(){
if(!toggleNav.hasClass('close-nav')){
//it means navigation is not visible yet - open it and animate navigation layertoggleNav.addClass('close-nav');
overlayNav.children('span').velocity({
translateZ:0,scaleX:1,scaleY:1,}
,500,'easeInCubic',function(){
navigation.addClass('fade-in');
}
);
}
else{
//navigation is open - close it and remove navigation layertoggleNav.removeClass('close-nav');
overlayContent.children('span').velocity({
translateZ:0,scaleX:1,scaleY:1,}
,500,'easeInCubic',function(){
navigation.removeClass('fade-in');
overlayNav.children('span').velocity({
translateZ:0,scaleX:0,scaleY:0,}
,0);
overlayContent.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
overlayContent.children('span').velocity({
translateZ:0,scaleX:0,scaleY:0,}
,0,function(){
overlayContent.removeClass('is-hidden')}
);
}
);
if($('html').hasClass('no-csstransitions')){
overlayContent.children('span').velocity({
translateZ:0,scaleX:0,scaleY:0,}
,0,function(){
overlayContent.removeClass('is-hidden')}
);
}
}
);
}
}
);
function layerInit(){
var diameterValue = (Math.sqrt( Math.pow($(window).height(),2) + Math.pow($(window).width(),2))*2);
overlayNav.children('span').velocity({
scaleX:0,scaleY:0,translateZ:0,}
,50).velocity({
height:diameterValue+'px',width:diameterValue+'px',top:-(diameterValue/2)+'px',left:-(diameterValue/2)+'px',}
,0);
overlayContent.children('span').velocity({
scaleX:0,scaleY:0,translateZ:0,}
,50).velocity({
height:diameterValue+'px',width:diameterValue+'px',top:-(diameterValue/2)+'px',left:-(diameterValue/2)+'px',}
,0);
}
}
);
JS代码(modernizr.js):
/*! * Modernizr v2.8.3 * www.modernizr.com * * Copyright (c) Faruk Ates,Paul Irish,Alex Sexton * Available under the BSD and MIT licenses:www.modernizr.com/license/ */
/* * Modernizr tests which native CSS3 and HTML5 features are available in * the current UA and makes the results available to you in two ways:* as properties on a global Modernizr object,and as classes on the * <html> element. This information allows you to progressively enhance * your pages with a granular level of control over the experience. * * Modernizr has an optional (not included) conditional resource loader * called Modernizr.load(),based on Yepnope.js (yepnopejs.com). * To get a build that includes Modernizr.load(),as well as choosing * which tests to include,go to www.modernizr.com/download/ * * Authors Faruk Ates,Paul Irish,Alex Sexton * Contributors Ryan Seddon,Ben Alman */
window.Modernizr = (function( window,document,undefined ){
var version = '2.8.3',Modernizr ={
}
,/*>>cssclasses*/
// option for enabling the HTML classes to be added enableClasses = true,/*>>cssclasses*/
docElement = document.documentElement,/** * Create our "modernizr" element that we do most feature tests on. */
mod = 'modernizr',modElem = document.createElement(mod),mStyle = modElem.style,/** * Create the input element for various Web Forms feature tests. */
inputElem /*>>inputelem*/
= document.createElement('input') /*>>inputelem*/
,/*>>smile*/
smile = ':)',/*>>smile*/
toString ={
}
.toString,// TODO::make the prefixes more granular /*>>prefixes*/
// List of property values to set for css tests. See ticket #21 prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),/*>>prefixes*/
/*>>domprefixes*/
// Following spec is to expose vendor-specific style properties as:// elem.style.WebkitBorderRadius // and the following would be incorrect:// elem.style.webkitBorderRadius // Webkit ghosts their properties in lowercase but Opera & Moz do not. // Microsoft uses a lowercase `ms` instead of the correct `Ms` in IE8+ // erik.eae.net/archives/2008/03/10/21.48.10/ // More here:github.com/Modernizr/Modernizr/issues/issue/21 omPrefixes = 'Webkit Moz O ms',cssomPrefixes = omPrefixes.split(' '),domPrefixes = omPrefixes.toLowerCase().split(' '),/*>>domprefixes*/
/*>>ns*/
ns ={
'svg':'http://www.w3.org/2000/svg'}
,/*>>ns*/
tests ={
}
,inputs ={
}
,attrs ={
}
,classes = [],slice = classes.slice,featureName,// used in testing loop /*>>teststyles*/
// Inject element with style element and some CSS rules injectElementWithStyles = function( rule,callback,nodes,testnames ){
var style,ret,node,docOverflow,div = document.createElement('div'),// After page load injecting a fake body doesn't work so check if body exists body = document.body,// IE6 and 7 won't return offsetWidth or offsetHeight unless it's in the body element,so we fake it. fakeBody = body || document.createElement('body');
if ( parseInt(nodes,10) ){
// In order not to give false positives we create a node for each test // This also allows the method to scale for unspecified uses while ( nodes-- ){
node = document.createElement('div');
node.id = testnames ? testnames[nodes]:mod + (nodes + 1);
div.appendChild(node);
}
}
// <style> elements in IE6-9 are considered 'NoScope' elements and therefore will be removed // when injected with innerHTML. To get around this you need to prepend the 'NoScope' element // with a 'scoped' element,in our case the soft-hyphen entity as it won't mess with our measurements. // msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx // Documents served as xml will throw if using ­
so use xml friendly encoded version. See issue #277 style = ['­
','<style id="s',mod,'">',rule,'</style>'].join('');
div.id = mod;
// IE6 will false positive on some tests due to the style element inside the test div somehow interfering offsetHeight,so insert it into body or fakebody. // Opera will act all quirky when injecting elements in documentElement when page is served as xml,needs fakebody too. #270 (body ? div:fakeBody).innerHTML += style;
fakeBody.appendChild(div);
if ( !body ){
//avoid crashing IE8,if background image is used fakeBody.style.background = '';
//Safari 5.13/5.1.4 OSX stops loading if::-webkit-scrollbar is used and scrollbars are visible fakeBody.style.overflow = 'hidden';
docOverflow = docElement.style.overflow;
docElement.style.overflow = 'hidden';
docElement.appendChild(fakeBody);
}
ret = callback(div,rule);
// If this is done after page load we don't want to remove the body so check if body exists if ( !body ){
fakeBody.parentNode.removeChild(fakeBody);
docElement.style.overflow = docOverflow;
}
else{
div.parentNode.removeChild(div);
}
return !!ret;
}
,/*>>teststyles*/
/*>>mq*/
// adapted from matchMedia polyfill // by Scott Jehl and Paul Irish // gist.github.com/786768 testMediaQuery = function( mq ){
var matchMedia = window.matchMedia || window.msMatchMedia;
if ( matchMedia ){
return matchMedia(mq) && matchMedia(mq).matches || false;
}
var bool;
injectElementWithStyles('@media ' + mq + '{
#' + mod + '{
position:absolute;
}
}
',function( node ){
bool = (window.getComputedStyle ? getComputedStyle(node,null):node.currentStyle)['position'] == 'absolute';
}
);
return bool;
}
,/*>>mq*/
/*>>hasevent*/
// // isEventSupported determines if a given element supports the given event // kangax.github.com/iseventsupported/ // // The following results are known incorrects:// Modernizr.hasEvent("webkitTransitionEnd",elem) // false negative // Modernizr.hasEvent("textInput") // in Webkit. github.com/Modernizr/Modernizr/issues/333 // ... isEventSupported = (function(){
var TAGNAMES ={
'select':'input','change':'input','submit':'form','reset':'form','error':'img','load':'img','abort':'img'}
;
function isEventSupported( eventName,element ){
element = element || document.createElement(TAGNAMES[eventName] || 'div');
eventName = 'on' + eventName;
// When using `setAttribute`,IE skips "unload",WebKit skips "unload" and "resize",whereas `in` "catches" those var isSupported = eventName in element;
if ( !isSupported ){
// If it has no `setAttribute` (i.e. doesn't implement Node interface),try generic element if ( !element.setAttribute ){
element = document.createElement('div');
}
if ( element.setAttribute && element.removeAttribute ){
element.setAttribute(eventName,'');
isSupported = is(element[eventName],'function');
// If property was created,"remove it" (by setting value to `undefined`) if ( !is(element[eventName],'undefined') ){
element[eventName] = undefined;
}
element.removeAttribute(eventName);
}
}
element = null;
return isSupported;
}
return isEventSupported;
}
)(),/*>>hasevent*/
// TODO::Add flag for hasownprop ? didn't last time // hasOwnProperty shim by kangax needed for Safari 2.0 support _hasOwnProperty = ({
}
).hasOwnProperty,hasOwnProp;
if ( !is(_hasOwnProperty,'undefined') && !is(_hasOwnProperty.call,'undefined') ){
hasOwnProp = function (object,property){
return _hasOwnProperty.call(object,property);
}
;
}
else{
hasOwnProp = function (object,property){
/* yes,this can give false positives/negatives,but most of the time we don't care about those */
return ((property in object) && is(object.constructor.prototype[property],'undefined'));
}
;
}
// Adapted from ES5-shim https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js // es5.github.com/#x15.3.4.5 if (!Function.prototype.bind){
Function.prototype.bind = function bind(that){
var target = this;
if (typeof target != "function"){
throw new TypeError();
}
var args = slice.call(arguments,1),bound = function (){
if (this instanceof bound){
var F = function(){
}
;
F.prototype = target.prototype;
var self = new F();
var result = target.apply( self,args.concat(slice.call(arguments)) );
if (Object(result) === result){
return result;
}
return self;
}
else{
return target.apply( that,args.concat(slice.call(arguments)) );
}
}
;
return bound;
}
;
}
/** * setCss applies given styles to the Modernizr DOM node. */
function setCss( str ){
mStyle.cssText = str;
}
/** * setCssAll extrapolates all vendor-specific css strings. */
function setCssAll( str1,str2 ){
return setCss(prefixes.join(str1 + ';
') + ( str2 || '' ));
}
/** * is returns a boolean for if typeof obj is exactly type. */
function is( obj,type ){
return typeof obj === type;
}
/** * contains returns a boolean for if substr is found within str. */
function contains( str,substr ){
return !!~('' + str).indexOf(substr);
}
/*>>testprop*/
// testProps is a generic CSS / DOM property test. // In testing support for a given CSS property,it's legit to test:// `elem.style[styleName] !== undefined` // If the property is supported it will return an empty string,// if unsupported it will return undefined. // We'll take advantage of this quick test and skip setting a style // on our modernizr element,but instead just testing undefined vs // empty string. // Because the testing of the CSS property names (with "-",as // opposed to the camelCase DOM properties) is non-portable and // non-standard but works in WebKit and IE (but not Gecko or Opera),// we explicitly reject properties with dashes so that authors // developing in WebKit or IE first don't end up with // browser-specific content by accident. function testProps( props,prefixed ){
for ( var i in props ){
var prop = props[i];
if ( !contains(prop,"-") && mStyle[prop] !== undefined ){
return prefixed == 'pfx' ? prop:true;
}
}
return false;
}
/*>>testprop*/
// TODO::add testDOMProps /** * testDOMProps is a generic DOM property test;
if a browser supports * a certain property,it won't return undefined for it. */
function testDOMProps( props,obj,elem ){
for ( var i in props ){
var item = obj[props[i]];
if ( item !== undefined){
// return the property name as a string if (elem === false) return props[i];
// let's bind a function if (is(item,'function')){
// default to autobind unless override return item.bind(elem || obj);
}
// return the unbound function or obj or value return item;
}
}
return false;
}
/*>>testallprops*/
/** * testPropsAll tests a list of DOM properties we want to check against. * We specify literally ALL possible (known and/or likely) properties on * the element including the non-vendor prefixed one,for forward- * compatibility. */
function testPropsAll( prop,prefixed,elem ){
var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
// did they call .prefixed('boxSizing') or are we just testing a prop? if(is(prefixed,"string") || is(prefixed,"undefined")){
return testProps(props,prefixed);
// otherwise,they called .prefixed('requestAnimationFrame',window[,elem])}
else{
props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
return testDOMProps(props,prefixed,elem);
}
}
/*>>testallprops*/
/** * Tests * ----- */
// The *new* flexbox // dev.w3.org/csswg/css3-flexbox tests['flexbox'] = function(){
return testPropsAll('flexWrap');
}
;
// The *old* flexbox // www.w3.org/TR/2009/WD-css3-flexbox-20090723/ tests['flexboxlegacy'] = function(){
return testPropsAll('boxDirection');
}
;
// On the S60 and BB Storm,getContext exists,but always returns undefined // so we actually have to call getContext() to verify // github.com/Modernizr/Modernizr/issues/issue/97/ tests['canvas'] = function(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
;
tests['canvastext'] = function(){
return !!(Modernizr['canvas'] && is(document.createElement('canvas').getContext('2d').fillText,'function'));
}
;
// webk.it/70117 is tracking a legit WebGL feature detect proposal // We do a soft detect which may false positive in order to avoid // an expensive context creation:bugzil.la/732441 tests['webgl'] = function(){
return !!window.WebGLRenderingContext;
}
;
/* * The Modernizr.touch test only indicates if the browser supports * touch events,which does not necessarily reflect a touchscreen * device,as evidenced by tablets running Windows 7 or,alas,* the Palm Pre / WebOS (touch) phones. * * Additionally,Chrome (desktop) used to lie about its support on this,* but that has since been rectified:crbug.com/36415 * * We also test for Firefox 4 Multitouch Support. * * For more info,see:modernizr.github.com/Modernizr/touch.html */
tests['touch'] = function(){
var bool;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch){
bool = true;
}
else{
injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{
#modernizr{
top:9px;
position:absolute}
}
'].join(''),function( node ){
bool = node.offsetTop === 9;
}
);
}
return bool;
}
;
// geolocation is often considered a trivial feature detect... // Turns out,it's quite tricky to get right:// // Using !!navigator.geolocation does two things we don't want. It:// 1. Leaks memory in IE9:github.com/Modernizr/Modernizr/issues/513 // 2. Disables page caching in WebKit:webk.it/43956 // // Meanwhile,in Firefox < 8,an about:config setting could expose // a false positive that would throw an exception:bugzil.la/688158 tests['geolocation'] = function(){
return 'geolocation' in navigator;
}
;
tests['postmessage'] = function(){
return !!window.postMessage;
}
;
// Chrome incognito mode used to throw an exception when using openDatabase // It doesn't anymore. tests['websqldatabase'] = function(){
return !!window.openDatabase;
}
;
// Vendors had inconsistent prefixing with the experimental Indexed DB:// - Webkit's implementation is accessible through webkitIndexedDB // - Firefox shipped moz_indexedDB before FF4b9,but since then has been mozIndexedDB // For speed,we don't test the legacy (and beta-only) indexedDB tests['indexedDB'] = function(){
return !!testPropsAll("indexedDB",window);
}
;
// documentMode logic from YUI to filter out IE8 Compat Mode // which false positives. tests['hashchange'] = function(){
return isEventSupported('hashchange',window) && (document.documentMode === undefined || document.documentMode > 7);
}
;
// Per 1.6:// This used to be Modernizr.historymanagement but the longer // name has been deprecated in favor of a shorter and property-matching one. // The old API is still available in 1.6,but as of 2.0 will throw a warning,// and in the first release thereafter disappear entirely. tests['history'] = function(){
return !!(window.history && history.pushState);
}
;
tests['draganddrop'] = function(){
var div = document.createElement('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}
;
// FF3.6 was EOL'ed on 4/24/12,but the ESR version of FF10 // will be supported until FF19 (2/12/13),at which time,ESR becomes FF17. // FF10 still uses prefixes,so check for it until then. // for more ESR info,see:mozilla.org/en-US/firefox/organizations/faq/ tests['websockets'] = function(){
return 'WebSocket' in window || 'MozWebSocket' in window;
}
;
// css-tricks.com/rgba-browser-support/ tests['rgba'] = function(){
// Set an rgba() color and check the returned value setCss('background-color:rgba(150,255,150,.5)');
return contains(mStyle.backgroundColor,'rgba');
}
;
tests['hsla'] = function(){
// Same as rgba(),in fact,browsers re-map hsla() to rgba() internally,// except IE9 who retains it as hsla setCss('background-color:hsla(120,40%,100%,.5)');
return contains(mStyle.backgroundColor,'rgba') || contains(mStyle.backgroundColor,'hsla');
}
;
tests['multiplebgs'] = function(){
// Setting multiple images AND a color on the background shorthand property // and then querying the style.background property value for the number of // occurrences of "url(" is a reliable method for detecting ACTUAL support for this! setCss('background:url(https://),url(https://),red url(https://)');
// If the UA supports multiple backgrounds,there should be three occurrences // of the string "url(" in the return value for elemStyle.background return (/(url\s*\(.*?){
3}
/).test(mStyle.background);
}
;
// this will false positive in Opera Mini // github.com/Modernizr/Modernizr/issues/396 tests['backgroundsize'] = function(){
return testPropsAll('backgroundSize');
}
;
tests['borderimage'] = function(){
return testPropsAll('borderImage');
}
;
// Super comprehensive table about all the unique implementations of // border-radius:muddledramblings.com/table-of-css3-border-radius-compliance tests['borderradius'] = function(){
return testPropsAll('borderRadius');
}
;
// WebOS unfortunately false positives on this test. tests['boxshadow'] = function(){
return testPropsAll('boxShadow');
}
;
// FF3.0 will false positive on this test tests['textshadow'] = function(){
return document.createElement('div').style.textShadow === '';
}
;
tests['opacity'] = function(){
// Browsers that actually have CSS Opacity implemented have done so // according to spec,which means their return values are within the // range of [0.0,1.0] - including the leading zero. setCssAll('opacity:.55');
// The non-literal . in this regex is intentional:// German Chrome returns this value as 0,55 // github.com/Modernizr/Modernizr/issues/#issue/59/comment/516632 return (/^0.55$/).test(mStyle.opacity);
}
;
// Note,Android < 4 will pass this test,but can only animate // a single property at a time // goo.gl/v3V4Gp tests['cssanimations'] = function(){
return testPropsAll('animationName');
}
;
tests['csscolumns'] = function(){
return testPropsAll('columnCount');
}
;
tests['cssgradients'] = function(){
/** * For CSS Gradients syntax,please see:* webkit.org/blog/175/introducing-css-gradients/ * developer.mozilla.org/en/CSS/-moz-linear-gradient * developer.mozilla.org/en/CSS/-moz-radial-gradient * dev.w3.org/csswg/css3-images/#gradients- */
var str1 = 'background-image:',str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));
',str3 = 'linear-gradient(left top,#9f9,white);
';
setCss( // legacy webkit syntax (FIXME:remove when syntax not in use anymore) (str1 + '-webkit- '.split(' ').join(str2 + str1) + // standard syntax // trailing 'background-image:' prefixes.join(str3 + str1)).slice(0,-str1.length) );
return contains(mStyle.backgroundImage,'gradient');
}
;
tests['cssreflections'] = function(){
return testPropsAll('boxReflect');
}
;
tests['csstransforms'] = function(){
return !!testPropsAll('transform');
}
;
tests['csstransforms3d'] = function(){
var ret = !!testPropsAll('perspective');
// Webkit's 3D transforms are passed off to the browser's own graphics renderer. // It works fine in Safari on Leopard and Snow Leopard,but not in Chrome in // some conditions. As a result,Webkit typically recognizes the syntax but // will sometimes throw a false positive,thus we must do a more thorough check:if ( ret && 'webkitPerspective' in docElement.style ){
// Webkit allows this media query to succeed only if the feature is enabled. // `@media (transform-3d),(-webkit-transform-3d){
...}
` injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){
#modernizr{
left:9px;
position:absolute;
height:3px;
}
}
',function( node,rule ){
ret = node.offsetLeft === 9 && node.offsetHeight === 3;
}
);
}
return ret;
}
;
tests['csstransitions'] = function(){
return testPropsAll('transition');
}
;
/*>>fontface*/
// @font-face detection routine by Diego Perini // javascript.nwbox.com/CSSSupport/ // false positives:// WebOS github.com/Modernizr/Modernizr/issues/342 // WP7 github.com/Modernizr/Modernizr/issues/538 tests['fontface'] = function(){
var bool;
injectElementWithStyles('@font-face{
font-family:"font";
src:url("https://")}
',function( node,rule ){
var style = document.getElementById('smodernizr'),sheet = style.sheet || style.styleSheet,cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText:sheet.cssText || ''):'';
bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
}
);
return bool;
}
;
/*>>fontface*/
// CSS generated content detection tests['generatedcontent'] = function(){
var bool;
injectElementWithStyles(['#',mod,'{
font:0/0 a}
#',mod,':after{
content:"',smile,'";
visibility:hidden;
font:3px/1 a}
'].join(''),function( node ){
bool = node.offsetHeight >= 3;
}
);
return bool;
}
;
// These tests evaluate support of the video/audio elements,as well as // testing what types of content they support. // // We're using the Boolean constructor here,so that we can extend the value // e.g. Modernizr.video // true // Modernizr.video.ogg // 'probably' // // Codec values from:github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845 // thx to NielsLeenheer and zcorpan // Note:in some older browsers,"no" was a return value instead of empty string. // It was live in FF3.5.0 and 3.5.1,but fixed in 3.5.2 // It was also live in Safari 4.0.0 - 4.0.4,but fixed in 4.0.5 tests['video'] = function(){
var elem = document.createElement('video'),bool = false;
// IE9 Running on Windows Server SKU can cause an exception to be thrown,bug #224 try{
if ( bool = !!elem.canPlayType ){
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('video/ogg;
codecs="theora"') .replace(/^no$/,'');
// Without QuickTime,this value will be `undefined`. github.com/Modernizr/Modernizr/issues/546 bool.h264 = elem.canPlayType('video/mp4;
codecs="avc1.42E01E"') .replace(/^no$/,'');
bool.webm = elem.canPlayType('video/webm;
codecs="vp8,vorbis"').replace(/^no$/,'');
}
}
catch(e){
}
return bool;
}
;
tests['audio'] = function(){
var elem = document.createElement('audio'),bool = false;
try{
if ( bool = !!elem.canPlayType ){
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('audio/ogg;
codecs="vorbis"').replace(/^no$/,'');
bool.mp3 = elem.canPlayType('audio/mpeg;
') .replace(/^no$/,'');
// Mimetypes accepted:// developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements // bit.ly/iphoneoscodecs bool.wav = elem.canPlayType('audio/wav;
codecs="1"') .replace(/^no$/,'');
bool.m4a = ( elem.canPlayType('audio/x-m4a;
') || elem.canPlayType('audio/aac;
')) .replace(/^no$/,'');
}
}
catch(e){
}
return bool;
}
;
// In FF4,if disabled,window.localStorage should === null. // Normally,we could not test that directly and need to do a // `('localStorage' in window) && ` test first because otherwise Firefox will // throw bugzil.la/365772 if cookies are disabled // Also in iOS5 Private Browsing mode,attempting to use localStorage.setItem // will throw the exception:// QUOTA_EXCEEDED_ERRROR DOM Exception 22. // Peculiarly,getItem and removeItem calls do not throw. // Because we are forced to try/catch this,we'll go aggressive. // Just FWIW:IE8 Compat mode supports these features completely:// www.quirksmode.org/dom/html5.html // But IE8 doesn't support either with local files tests['localstorage'] = function(){
try{
localStorage.setItem(mod,mod);
localStorage.removeItem(mod);
return true;
}
catch(e){
return false;
}
}
;
tests['sessionstorage'] = function(){
try{
sessionStorage.setItem(mod,mod);
sessionStorage.removeItem(mod);
return true;
}
catch(e){
return false;
}
}
;
tests['webworkers'] = function(){
return !!window.Worker;
}
;
tests['applicationcache'] = function(){
return !!window.applicationCache;
}
;
// Thanks to Erik Dahlstrom tests['svg'] = function(){
return !!document.createElementNS && !!document.createElementNS(ns.svg,'svg').createSVGRect;
}
;
// specifically for SVG inline in HTML,not within XHTML // test page:paulirish.com/demo/inline-svg tests['inlinesvg'] = function(){
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == ns.svg;
}
;
// SVG SMIL animation tests['smil'] = function(){
return !!document.createElementNS && /SVGAnimate/.test(toString.call(document.createElementNS(ns.svg,'animate')));
}
;
// This test is only for clip paths in SVG proper,not clip paths on HTML content // demo:srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath4.svg // However read the comments to dig into applying SVG clippaths to HTML content here:// github.com/Modernizr/Modernizr/issues/213#issuecomment-1149491 tests['svgclippaths'] = function(){
return !!document.createElementNS && /SVGClipPath/.test(toString.call(document.createElementNS(ns.svg,'clipPath')));
}
;
/*>>webforms*/
// input features and input types go directly onto the ret object,bypassing the tests loop. // Hold this guy to execute in a moment. function webforms(){
/*>>input*/
// Run through HTML5's new input attributes to see if the UA understands any. // We're using f which is the <input> element created early on // Mike Taylr has created a comprehensive resource for testing these attributes // when applied to all input types:// miketaylr.com/code/input-type-attr.html // spec:www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary // Only input placeholder is tested while textarea's placeholder is not. // Currently Safari 4 and Opera 11 have support only for the input placeholder // Both tests are available in feature-detects/forms-placeholder.js Modernizr['input'] = (function( props ){
for ( var i = 0,len = props.length;
i < len;
i++ ){
attrs[ props[i] ] = !!(props[i] in inputElem);
}
if (attrs.list){
// safari false positive's on datalist:webk.it/74252 // see also github.com/Modernizr/Modernizr/issues/146 attrs.list = !!(document.createElement('datalist') && window.HTMLDataListElement);
}
return attrs;
}
)('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));
/*>>input*/
/*>>inputtypes*/
// Run through HTML5's new input types to see if the UA understands any. // This is put behind the tests runloop because it doesn't return a // true/false like all the other tests;
instead,it returns an object // containing each input type with its corresponding true/false value // Big thanks to @miketaylr for the html5 forms expertise. miketaylr.com/ Modernizr['inputtypes'] = (function(props){
for ( var i = 0,bool,inputElemType,defaultView,len = props.length;
i < len;
i++ ){
inputElem.setAttribute('type',inputElemType = props[i]);
bool = inputElem.type !== 'text';
// We first check to see if the type we give it sticks.. // If the type does,we feed it a textual value,which shouldn't be valid. // If the value doesn't stick,we know there's input sanitization which infers a custom UI if ( bool ){
inputElem.value = smile;
inputElem.style.cssText = 'position:absolute;
visibility:hidden;
';
if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ){
docElement.appendChild(inputElem);
defaultView = document.defaultView;
// Safari 2-4 allows the smiley as a value,despite making a slider bool = defaultView.getComputedStyle && defaultView.getComputedStyle(inputElem,null).WebkitAppearance !== 'textfield' && // Mobile android web browser has false positive,so must // check the height to see if the widget is actually there. (inputElem.offsetHeight !== 0);
docElement.removeChild(inputElem);
}
else if ( /^(search|tel)$/.test(inputElemType) ){
// Spec doesn't define any special parsing or detectable UI // behaviors so we pass these through as true // Interestingly,opera fails the earlier test,so it doesn't // even make it here.}
else if ( /^(url|email)$/.test(inputElemType) ){
// Real url and email support comes with prebaked validation. bool = inputElem.checkValidity && inputElem.checkValidity() === false;
}
else{
// If the upgraded input compontent rejects the:) text,we got a winner bool = inputElem.value != smile;
}
}
inputs[ props[i] ] = !!bool;
}
return inputs;
}
)('search tel url email datetime date month week time datetime-local number range color'.split(' '));
/*>>inputtypes*/
}
/*>>webforms*/
// End of test definitions // ----------------------- // Run through all tests and detect their support in the current UA. // todo:hypothetically we could be doing an array of tests and use a basic loop here. for ( var feature in tests ){
if ( hasOwnProp(tests,feature) ){
// run the test,throw the return value into the Modernizr,// then based on that boolean,define an appropriate className // and push it into an array of classes we'll join later. featureName = feature.toLowerCase();
Modernizr[featureName] = tests[feature]();
classes.push((Modernizr[featureName] ? '':'no-') + featureName);
}
}
/*>>webforms*/
// input tests need to run. Modernizr.input || webforms();
/*>>webforms*/
/** * addTest allows the user to define their own feature tests * the result will be added onto the Modernizr object,* as well as an appropriate className set on the html element * * @param feature - String naming the feature * @param test - Function returning true if feature is supported,false if not */
Modernizr.addTest = function ( feature,test ){
if ( typeof feature == 'object' ){
for ( var key in feature ){
if ( hasOwnProp( feature,key ) ){
Modernizr.addTest( key,feature[ key ] );
}
}
}
else{
feature = feature.toLowerCase();
if ( Modernizr[feature] !== undefined ){
// we're going to quit if you're trying to overwrite an existing test // if we were to allow it,we'd do this:// var re = new RegExp("\\b(no-)?" + feature + "\\b");
// docElement.className = docElement.className.replace( re,'' );
// but,no rly,stuff 'em. return Modernizr;
}
test = typeof test == 'function' ? test():test;
if (typeof enableClasses !== "undefined" && enableClasses){
docElement.className += ' ' + (test ? '':'no-') + feature;
}
Modernizr[feature] = test;
}
return Modernizr;
// allow chaining.}
;
// Reset modElem.cssText to nothing to reduce memory footprint. setCss('');
modElem = inputElem = null;
/*>>shiv*/
/** * @preserve HTML5 Shiv prev3.7.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
;
(function(window,document){
/*jshint evil:true */
/** version */
var version = '3.7.0';
/** Preset options */
var options = window.html5 ||{
}
;
/** Used to skip problem elements */
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
/** Not all elements can be cloned in IE **/
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
/** Detect whether the browser supports default html5 styles */
var supportsHtml5Styles;
/** Name of the expando,to work with multiple documents or to re-shiv one document */
var expando = '_html5shiv';
/** The id for the the documents expando */
var expanID = 0;
/** Cached data for each document */
var expandoData ={
}
;
/** Detect whether the browser supports unknown elements */
var supportsUnknownElements;
(function(){
try{
var a = document.createElement('a');
a.innerHTML = '<xyz></xyz>';
//if the hidden property is implemented we can assume,that the browser supports basic HTML5 Styles supportsHtml5Styles = ('hidden' in a);
supportsUnknownElements = a.childNodes.length == 1 || (function(){
// assign a false positive if unable to shiv (document.createElement)('a');
var frag = document.createDocumentFragment();
return ( typeof frag.cloneNode == 'undefined' || typeof frag.createDocumentFragment == 'undefined' || typeof frag.createElement == 'undefined' );
}
());
}
catch(e){
// assign a false positive if detection fails => unable to shiv supportsHtml5Styles = true;
supportsUnknownElements = true;
}
}
());
/*--------------------------------------------------------------------------*/
/** * Creates a style sheet with the given CSS text and adds it to the document. * @private * @param{
Document}
ownerDocument The document. * @param{
String}
cssText The CSS text. * @returns{
StyleSheet}
The style element. */
function addStyleSheet(ownerDocument,cssText){
var p = ownerDocument.createElement('p'),parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
p.innerHTML = 'x<style>' + cssText + '</style>';
return parent.insertBefore(p.lastChild,parent.firstChild);
}
/** * Returns the value of `html5.elements` as an array. * @private * @returns{
Array}
An array of shived element node names. */
function getElements(){
var elements = html5.elements;
return typeof elements == 'string' ? elements.split(' '):elements;
}
/** * Returns the data associated to the given document * @private * @param{
Document}
ownerDocument The document. * @returns{
Object}
An object of data. */
function getExpandoData(ownerDocument){
var data = expandoData[ownerDocument[expando]];
if (!data){
data ={
}
;
expanID++;
ownerDocument[expando] = expanID;
expandoData[expanID] = data;
}
return data;
}
/** * returns a shived element for the given nodeName and document * @memberOf html5 * @param{
String}
nodeName name of the element * @param{
Document}
ownerDocument The context document. * @returns{
Object}
The shived element. */
function createElement(nodeName,ownerDocument,data){
if (!ownerDocument){
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
if (!data){
data = getExpandoData(ownerDocument);
}
var node;
if (data.cache[nodeName]){
node = data.cache[nodeName].cloneNode();
}
else if (saveClones.test(nodeName)){
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
}
else{
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because // * Attributes like `name` or `type` cannot be set/changed once an element // is inserted into a document/fragment // * Link elements with `src` attributes that are inaccessible,as with // a 403 response,will cause the tab/window to crash // * Script elements appended to fragments will execute when their `src` // or `text` property is set return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node):node;
}
/** * returns a shived DocumentFragment for the given document * @memberOf html5 * @param{
Document}
ownerDocument The context document. * @returns{
Object}
The shived DocumentFragment. */
function createDocumentFragment(ownerDocument,data){
if (!ownerDocument){
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createDocumentFragment();
}
data = data || getExpandoData(ownerDocument);
var clone = data.frag.cloneNode(),i = 0,elems = getElements(),l = elems.length;
for(;
i<l;
i++){
clone.createElement(elems[i]);
}
return clone;
}
/** * Shivs the `createElement` and `createDocumentFragment` methods of the document. * @private * @param{
Document|DocumentFragment}
ownerDocument The document. * @param{
Object}
data of the document. */
function shivMethods(ownerDocument,data){
if (!data.cache){
data.cache ={
}
;
data.createElem = ownerDocument.createElement;
data.createFrag = ownerDocument.createDocumentFragment;
data.frag = data.createFrag();
}
ownerDocument.createElement = function(nodeName){
//abort shiv if (!html5.shivMethods){
return data.createElem(nodeName);
}
return createElement(nodeName,ownerDocument,data);
}
;
ownerDocument.createDocumentFragment = Function('h,f','return function(){
' + 'var n=f.cloneNode(),c=n.createElement;
' + 'h.shivMethods&&(' + // unroll the `createElement` calls getElements().join().replace(/[\w\-]+/g,function(nodeName){
data.createElem(nodeName);
data.frag.createElement(nodeName);
return 'c("' + nodeName + '")';
}
) + ');
return n}
' )(html5,data.frag);
}
/*--------------------------------------------------------------------------*/
/** * Shivs the given document. * @memberOf html5 * @param{
Document}
ownerDocument The document to shiv. * @returns{
Document}
The shived document. */
function shivDocument(ownerDocument){
if (!ownerDocument){
ownerDocument = document;
}
var data = getExpandoData(ownerDocument);
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS){
data.hasCSS = !!addStyleSheet(ownerDocument,// corrects block display not defined in IE6/7/8/9 'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
display:block}
' + // adds styling not present in IE6/7/8/9 'mark{
background:#FF0;
color:#000}
' + // hides non-rendered elements 'template{
display:none}
' );
}
if (!supportsUnknownElements){
shivMethods(ownerDocument,data);
}
return ownerDocument;
}
/*--------------------------------------------------------------------------*/
/** * The `html5` object is exposed so that more elements can be shived and * existing shiving can be detected on iframes. * @type Object * @example * * // options can be changed before the script is included * html5 ={
'elements':'mark section','shivCSS':false,'shivMethods':false}
;
*/
var html5 ={
/** * An array or space separated string of node names of the elements to shiv. * @memberOf html5 * @type Array|String */
'elements':options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',/** * current version of html5shiv */
'version':version,/** * A flag to indicate that the HTML5 style sheet should be inserted. * @memberOf html5 * @type Boolean */
'shivCSS':(options.shivCSS !== false),/** * Is equal to true if a browser supports creating unknown/HTML5 elements * @memberOf html5 * @type boolean */
'supportsUnknownElements':supportsUnknownElements,/** * A flag to indicate that the document's `createElement` and `createDocumentFragment` * methods should be overwritten. * @memberOf html5 * @type Boolean */
'shivMethods':(options.shivMethods !== false),/** * A string to describe the type of `html5` object ("default" or "default print"). * @memberOf html5 * @type String */
'type':'default',// shivs the document according to the specified `html5` object options 'shivDocument':shivDocument,//creates a shived element createElement:createElement,//creates a shived documentFragment createDocumentFragment:createDocumentFragment}
;
/*--------------------------------------------------------------------------*/
// expose html5 window.html5 = html5;
// shiv the document shivDocument(document);
}
(this,document));
/*>>shiv*/
// Assign private properties to the return object with prefix Modernizr._version = version;
// expose these for the plugin API. Look in the source for how to join() them against your input /*>>prefixes*/
Modernizr._prefixes = prefixes;
/*>>prefixes*/
/*>>domprefixes*/
Modernizr._domPrefixes = domPrefixes;
Modernizr._cssomPrefixes = cssomPrefixes;
/*>>domprefixes*/
/*>>mq*/
// Modernizr.mq tests a given media query,live against the current state of the window // A few important notes:// * If a browser does not support media queries at all (eg. oldIE) the mq() will always return false // * A max-width or orientation query will be evaluated against the current state,which may change later. // * You must specify values. Eg. If you are testing support for the min-width media query use:// Modernizr.mq('(min-width:0)') // usage:// Modernizr.mq('only screen and (max-width:768)') Modernizr.mq = testMediaQuery;
/*>>mq*/
/*>>hasevent*/
// Modernizr.hasEvent() detects support for a given event,with an optional element to test on // Modernizr.hasEvent('gesturestart',elem) Modernizr.hasEvent = isEventSupported;
/*>>hasevent*/
/*>>testprop*/
// Modernizr.testProp() investigates whether a given style property is recognized // Note that the property names must be provided in the camelCase variant. // Modernizr.testProp('pointerEvents') Modernizr.testProp = function(prop){
return testProps([prop]);
}
;
/*>>testprop*/
/*>>testallprops*/
// Modernizr.testAllProps() investigates whether a given style property,// or any of its vendor-prefixed variants,is recognized // Note that the property names must be provided in the camelCase variant. // Modernizr.testAllProps('boxSizing') Modernizr.testAllProps = testPropsAll;
/*>>testallprops*/
/*>>teststyles*/
// Modernizr.testStyles() allows you to add custom styles to the document and test an element afterwards // Modernizr.testStyles('#modernizr{
position:absolute}
',function(elem,rule){
...}
) Modernizr.testStyles = injectElementWithStyles;
/*>>teststyles*/
/*>>prefixed*/
// Modernizr.prefixed() returns the prefixed or nonprefixed property name variant of your input // Modernizr.prefixed('boxSizing') // 'MozBoxSizing' // Properties must be passed as dom-style camelcase,rather than `box-sizing` hypentated style. // Return values will also be the camelCase variant,if you need to translate that to hypenated style use:// // str.replace(/([A-Z])/g,function(str,m1){
return '-' + m1.toLowerCase();
}
).replace(/^ms-/,'-ms-');
// If you're trying to ascertain which transition end event to bind to,you might do something like... // // var transEndEventNames ={
// 'WebkitTransition':'webkitTransitionEnd',// 'MozTransition':'transitionend',// 'OTransition':'oTransitionEnd',// 'msTransition':'MSTransitionEnd',// 'transition':'transitionend' //}
,// transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Modernizr.prefixed = function(prop,obj,elem){
if(!obj){
return testPropsAll(prop,'pfx');
}
else{
// Testing DOM property e.g. Modernizr.prefixed('requestAnimationFrame',window) // 'mozRequestAnimationFrame' return testPropsAll(prop,obj,elem);
}
}
;
/*>>prefixed*/
/*>>cssclasses*/
// Remove "no-js" class from <html> element,if it exists:docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/,'$1$2') + // Add the new classes to the <html> element. (enableClasses ? ' js ' + classes.join(' '):'');
/*>>cssclasses*/
return Modernizr;
}
)(this,this.document);
JS代码(velocity.min.js):
/*! VelocityJS.org (1.1.0). (C) 2014 Julian Shapiro. MIT @license:en.wikipedia.org/wiki/MIT_License */
/*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license:en.wikipedia.org/wiki/MIT_License. */
!function(e){
function t(e){
var t=e.length,r=$.type(e);
return"function"===r||$.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===r||0===t||"number"==typeof t&&t>0&&t-1 in e}
if(!e.jQuery){
var $=function(e,t){
return new $.fn.init(e,t)}
;
$.isWindow=function(e){
return null!=e&&e==e.window}
,$.type=function(e){
return null==e?e+"":"object"==typeof e||"function"==typeof e?a[o.call(e)]||"object":typeof e}
,$.isArray=Array.isArray||function(e){
return"array"===$.type(e)}
,$.isPlainObject=function(e){
var t;
if(!e||"object"!==$.type(e)||e.nodeType||$.isWindow(e))return!1;
try{
if(e.constructor&&!n.call(e,"constructor")&&!n.call(e.constructor.prototype,"isPrototypeOf"))return!1}
catch(r){
return!1}
for(t in e);
return void 0===t||n.call(e,t)}
,$.each=function(e,r,a){
var n,o=0,i=e.length,s=t(e);
if(a){
if(s)for(;
i>o&&(n=r.apply(e[o],a),n!==!1);
o++);
else for(o in e)if(n=r.apply(e[o],a),n===!1)break}
else if(s)for(;
i>o&&(n=r.call(e[o],o,e[o]),n!==!1);
o++);
else for(o in e)if(n=r.call(e[o],o,e[o]),n===!1)break;
return e}
,$.data=function(e,t,a){
if(void 0===a){
var n=e[$.expando],o=n&&r[n];
if(void 0===t)return o;
if(o&&t in o)return o[t]}
else if(void 0!==t){
var n=e[$.expando]||(e[$.expando]=++$.uuid);
return r[n]=r[n]||{
}
,r[n][t]=a,a}
}
,$.removeData=function(e,t){
var a=e[$.expando],n=a&&r[a];
n&&$.each(t,function(e,t){
delete n[t]}
)}
,$.extend=function(){
var e,t,r,a,n,o,i=arguments[0]||{
}
,s=1,l=arguments.length,u=!1;
for("boolean"==typeof i&&(u=i,i=arguments[s]||{
}
,s++),"object"!=typeof i&&"function"!==$.type(i)&&(i={
}
),s===l&&(i=this,s--);
l>s;
s++)if(null!=(n=arguments[s]))for(a in n)e=i[a],r=n[a],i!==r&&(u&&r&&($.isPlainObject(r)||(t=$.isArray(r)))?(t?(t=!1,o=e&&$.isArray(e)?e:[]):o=e&&$.isPlainObject(e)?e:{
}
,i[a]=$.extend(u,o,r)):void 0!==r&&(i[a]=r));
return i}
,$.queue=function(e,r,a){
function n(e,r){
var a=r||[];
return null!=e&&(t(Object(e))?!function(e,t){
for(var r=+t.length,a=0,n=e.length;
r>a;
)e[n++]=t[a++];
if(r!==r)for(;
void 0!==t[a];
)e[n++]=t[a++];
return e.length=n,e}
(a,"string"==typeof e?[e]:e):[].push.call(a,e)),a}
if(e){
r=(r||"fx")+"queue";
var o=$.data(e,r);
return a?(!o||$.isArray(a)?o=$.data(e,r,n(a)):o.push(a),o):o||[]}
}
,$.dequeue=function(e,t){
$.each(e.nodeType?[e]:e,function(e,r){
t=t||"fx";
var a=$.queue(r,t),n=a.shift();
"inprogress"===n&&(n=a.shift()),n&&("fx"===t&&a.unshift("inprogress"),n.call(r,function(){
$.dequeue(r,t)}
))}
)}
,$.fn=$.prototype={
init:function(e){
if(e.nodeType)return this[0]=e,this;
throw new Error("Not a DOM node.")}
,offset:function(){
var t=this[0].getBoundingClientRect?this[0].getBoundingClientRect():{
top:0,left:0}
;
return{
top:t.top+(e.pageYOffset||document.scrollTop||0)-(document.clientTop||0),left:t.left+(e.pageXOffset||document.scrollLeft||0)-(document.clientLeft||0)}
}
,position:function(){
function e(){
for(var e=this.offsetParent||document;
e&&"html"===!e.nodeType.toLowerCase&&"static"===e.style.position;
)e=e.offsetParent;
return e||document}
var t=this[0],e=e.apply(t),r=this.offset(),a=/^(?:body|html)$/i.test(e.nodeName)?{
top:0,left:0}
:$(e).offset();
return r.top-=parseFloat(t.style.marginTop)||0,r.left-=parseFloat(t.style.marginLeft)||0,e.style&&(a.top+=parseFloat(e.style.borderTopWidth)||0,a.left+=parseFloat(e.style.borderLeftWidth)||0),{
top:r.top-a.top,left:r.left-a.left}
}
}
;
var r={
}
;
$.expando="velocity"+(new Date).getTime(),$.uuid=0;
for(var a={
}
,n=a.hasOwnProperty,o=a.toString,i="Boolean Number String Function Array Date RegExp Object Error".split(" "),s=0;
s<i.length;
s++)a["[object "+i[s]+"]"]=i[s].toLowerCase();
$.fn.init.prototype=$.fn,e.Velocity={
Utilities:$}
}
}
(window),function(e){
"object"==typeof module&&"object"==typeof module.exports?module.exports=e():"function"==typeof define&&define.amd?define(e):e()}
(function(){
return function(e,t,r,a){
function n(e){
for(var t=-1,r=e?e.length:0,a=[];
++t<r;
){
var n=e[t];
n&&a.push(n)}
return a}
function o(e){
return g.isWrapped(e)?e=[].slice.call(e):g.isNode(e)&&(e=[e]),e}
function i(e){
var t=$.data(e,"velocity");
return null===t?a:t}
function s(e){
return function(t){
return Math.round(t*e)*(1/e)}
}
function l(e,r,a,n){
function o(e,t){
return 1-3*t+3*e}
function i(e,t){
return 3*t-6*e}
function s(e){
return 3*e}
function l(e,t,r){
return((o(t,r)*e+i(t,r))*e+s(t))*e}
function u(e,t,r){
return 3*o(t,r)*e*e+2*i(t,r)*e+s(t)}
function c(t,r){
for(var n=0;
m>n;
++n){
var o=u(r,e,a);
if(0===o)return r;
var i=l(r,e,a)-t;
r-=i/o}
return r}
function p(){
for(var t=0;
b>t;
++t)w[t]=l(t*x,e,a)}
function f(t,r,n){
var o,i,s=0;
do i=r+(n-r)/2,o=l(i,e,a)-t,o>0?n=i:r=i;
while(Math.abs(o)>h&&++s<v);
return i}
function d(t){
for(var r=0,n=1,o=b-1;
n!=o&&w[n]<=t;
++n)r+=x;
--n;
var i=(t-w[n])/(w[n+1]-w[n]),s=r+i*x,l=u(s,e,a);
return l>=y?c(t,s):0==l?s:f(t,r,r+x)}
function g(){
V=!0,(e!=r||a!=n)&&p()}
var m=4,y=.001,h=1e-7,v=10,b=11,x=1/(b-1),S="Float32Array"in t;
if(4!==arguments.length)return!1;
for(var P=0;
4>P;
++P)if("number"!=typeof arguments[P]||isNaN(arguments[P])||!isFinite(arguments[P]))return!1;
e=Math.min(e,1),a=Math.min(a,1),e=Math.max(e,0),a=Math.max(a,0);
var w=S?new Float32Array(b):new Array(b),V=!1,C=function(t){
return V||g(),e===r&&a===n?t:0===t?0:1===t?1:l(d(t),r,n)}
;
C.getControlPoints=function(){
return[{
x:e,y:r}
,{
x:a,y:n}
]}
;
var T="generateBezier("+[e,r,a,n]+")";
return C.toString=function(){
return T}
,C}
function u(e,t){
var r=e;
return g.isString(e)?v.Easings[e]||(r=!1):r=g.isArray(e)&&1===e.length?s.apply(null,e):g.isArray(e)&&2===e.length?b.apply(null,e.concat([t])):g.isArray(e)&&4===e.length?l.apply(null,e):!1,r===!1&&(r=v.Easings[v.defaults.easing]?v.defaults.easing:h),r}
function c(e){
if(e)for(var t=(new Date).getTime(),r=0,n=v.State.calls.length;
n>r;
r++)if(v.State.calls[r]){
var o=v.State.calls[r],s=o[0],l=o[2],u=o[3],f=!!u;
u||(u=v.State.calls[r][3]=t-16);
for(var d=Math.min((t-u)/l.duration,1),m=0,y=s.length;
y>m;
m++){
var h=s[m],b=h.element;
if(i(b)){
var S=!1;
if(l.display!==a&&null!==l.display&&"none"!==l.display){
if("flex"===l.display){
var w=["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex"];
$.each(w,function(e,t){
x.setPropertyValue(b,"display",t)}
)}
x.setPropertyValue(b,"display",l.display)}
l.visibility!==a&&"hidden"!==l.visibility&&x.setPropertyValue(b,"visibility",l.visibility);
for(var V in h)if("element"!==V){
var C=h[V],T,k=g.isString(C.easing)?v.Easings[C.easing]:C.easing;
if(1===d)T=C.endValue;
else if(T=C.startValue+(C.endValue-C.startValue)*k(d),!f&&T===C.currentValue)continue;
if(C.currentValue=T,x.Hooks.registered[V]){
var A=x.Hooks.getRoot(V),F=i(b).rootPropertyValueCache[A];
F&&(C.rootPropertyValue=F)}
var E=x.setPropertyValue(b,V,C.currentValue+(0===parseFloat(T)?"":C.unitType),C.rootPropertyValue,C.scrollData);
x.Hooks.registered[V]&&(i(b).rootPropertyValueCache[A]=x.Normalizations.registered[A]?x.Normalizations.registered[A]("extract",null,E[1]):E[1]),"transform"===E[0]&&(S=!0)}
l.mobileHA&&i(b).transformCache.translate3d===a&&(i(b).transformCache.translate3d="(0px,0px,0px)",S=!0),S&&x.flushTransformCache(b)}
}
l.display!==a&&"none"!==l.display&&(v.State.calls[r][2].display=!1),l.visibility!==a&&"hidden"!==l.visibility&&(v.State.calls[r][2].visibility=!1),l.progress&&l.progress.call(o[1],o[1],d,Math.max(0,u+l.duration-t),u),1===d&&p(r)}
v.State.isTicking&&P(c)}
function p(e,t){
if(!v.State.calls[e])return!1;
for(var r=v.State.calls[e][0],n=v.State.calls[e][1],o=v.State.calls[e][2],s=v.State.calls[e][4],l=!1,u=0,c=r.length;
c>u;
u++){
var p=r[u].element;
if(t||o.loop||("none"===o.display&&x.setPropertyValue(p,"display",o.display),"hidden"===o.visibility&&x.setPropertyValue(p,"visibility",o.visibility)),o.loop!==!0&&($.queue(p)[1]===a||!/\.velocityQueueEntryFlag/i.test($.queue(p)[1]))&&i(p)){
i(p).isAnimating=!1,i(p).rootPropertyValueCache={
}
;
var f=!1;
$.each(x.Lists.transforms3D,function(e,t){
var r=/^scale/.test(t)?1:0,n=i(p).transformCache[t];
i(p).transformCache[t]!==a&&new RegExp("^\\("+r+"[^.]").test(n)&&(f=!0,delete i(p).transformCache[t])}
),o.mobileHA&&(f=!0,delete i(p).transformCache.translate3d),f&&x.flushTransformCache(p),x.Values.removeClass(p,"velocity-animating")}
if(!t&&o.complete&&!o.loop&&u===c-1)try{
o.complete.call(n,n)}
catch(d){
setTimeout(function(){
throw d}
,1)}
s&&o.loop!==!0&&s(n),o.loop!==!0||t||($.each(i(p).tweensContainer,function(e,t){
/^rotate/.test(e)&&360===parseFloat(t.endValue)&&(t.endValue=0,t.startValue=360)}
),v(p,"reverse",{
loop:!0,delay:o.delay}
)),o.queue!==!1&&$.dequeue(p,o.queue)}
v.State.calls[e]=!1;
for(var g=0,m=v.State.calls.length;
m>g;
g++)if(v.State.calls[g]!==!1){
l=!0;
break}
l===!1&&(v.State.isTicking=!1,delete v.State.calls,v.State.calls=[])}
var f=function(){
if(r.documentMode)return r.documentMode;
for(var e=7;
e>4;
e--){
var t=r.createElement("div");
if(t.innerHTML="<!--[if IE "+e+"]><span></span><![endif]-->",t.getElementsByTagName("span").length)return t=null,e}
return a}
(),d=function(){
var e=0;
return t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||function(t){
var r=(new Date).getTime(),a;
return a=Math.max(0,16-(r-e)),e=r+a,setTimeout(function(){
t(r+a)}
,a)}
}
(),g={
isString:function(e){
return"string"==typeof e}
,isArray:Array.isArray||function(e){
return"[object Array]"===Object.prototype.toString.call(e)}
,isFunction:function(e){
return"[object Function]"===Object.prototype.toString.call(e)}
,isNode:function(e){
return e&&e.nodeType}
,isNodeList:function(e){
return"object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(e))&&e.length!==a&&(0===e.length||"object"==typeof e[0]&&e[0].nodeType>0)}
,isWrapped:function(e){
return e&&(e.jquery||t.Zepto&&t.Zepto.zepto.isZ(e))}
,isSVG:function(e){
return t.SVGElement&&e instanceof t.SVGElement}
,isEmptyObject:function(e){
for(var t in e)return!1;
return!0}
}
,$,m=!1;
if(e.fn&&e.fn.jquery?($=e,m=!0):$=t.Velocity.Utilities,8>=f&&!m)throw new Error("Velocity:IE8 and below require jQuery to be loaded before Velocity.");
if(7>=f)return void(jQuery.fn.velocity=jQuery.fn.animate);
var y=400,h="swing",v={
State:{
isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),isAndroid:/Android/i.test(navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test(navigator.userAgent),isChrome:t.chrome,isFirefox:/Firefox/i.test(navigator.userAgent),prefixElement:r.createElement("div"),prefixMatches:{
}
,scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[]}
,CSS:{
}
,Utilities:$,Redirects:{
}
,Easings:{
}
,Promise:t.Promise,defaults:{
queue:"",duration:y,easing:h,begin:a,complete:a,progress:a,display:a,visibility:a,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0}
,init:function(e){
$.data(e,"velocity",{
isSVG:g.isSVG(e),isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{
}
,transformCache:{
}
}
)}
,hook:null,mock:!1,version:{
major:1,minor:1,patch:0}
,debug:!1}
;
t.pageYOffset!==a?(v.State.scrollAnchor=t,v.State.scrollPropertyLeft="pageXOffset",v.State.scrollPropertyTop="pageYOffset"):(v.State.scrollAnchor=r.documentElement||r.body.parentNode||r.body,v.State.scrollPropertyLeft="scrollLeft",v.State.scrollPropertyTop="scrollTop");
var b=function(){
function e(e){
return-e.tension*e.x-e.friction*e.v}
function t(t,r,a){
var n={
x:t.x+a.dx*r,v:t.v+a.dv*r,tension:t.tension,friction:t.friction}
;
return{
dx:n.v,dv:e(n)}
}
function r(r,a){
var n={
dx:r.v,dv:e(r)}
,o=t(r,.5*a,n),i=t(r,.5*a,o),s=t(r,a,i),l=1/6*(n.dx+2*(o.dx+i.dx)+s.dx),u=1/6*(n.dv+2*(o.dv+i.dv)+s.dv);
return r.x=r.x+l*a,r.v=r.v+u*a,r}
return function a(e,t,n){
var o={
x:-1,v:0,tension:null,friction:null}
,i=[0],s=0,l=1e-4,u=.016,c,p,f;
for(e=parseFloat(e)||500,t=parseFloat(t)||20,n=n||null,o.tension=e,o.friction=t,c=null!==n,c?(s=a(e,t),p=s/n*u):p=u;
;
)if(f=r(f||o,p),i.push(1+f.x),s+=16,!(Math.abs(f.x)>l&&Math.abs(f.v)>l))break;
return c?function(e){
return i[e*(i.length-1)|0]}
:s}
}
();
v.Easings={
linear:function(e){
return e}
,swing:function(e){
return.5-Math.cos(e*Math.PI)/2}
,spring:function(e){
return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}
}
,$.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,t){
v.Easings[t[0]]=l.apply(null,t[1])}
);
var x=v.CSS={
RegEx:{
isHex:/^#([A-f\d]{
3}
){
1,2}
$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi}
,Lists:{
colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"]}
,Hooks:{
templates:{
textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]}
,registered:{
}
,register:function(){
for(var e=0;
e<x.Lists.colors.length;
e++){
var t="color"===x.Lists.colors[e]?"0 0 0 1":"255 255 255 1";
x.Hooks.templates[x.Lists.colors[e]]=["Red Green Blue Alpha",t]}
var r,a,n;
if(f)for(r in x.Hooks.templates){
a=x.Hooks.templates[r],n=a[0].split(" ");
var o=a[1].match(x.RegEx.valueSplit);
"Color"===n[0]&&(n.push(n.shift()),o.push(o.shift()),x.Hooks.templates[r]=[n.join(" "),o.join(" ")])}
for(r in x.Hooks.templates){
a=x.Hooks.templates[r],n=a[0].split(" ");
for(var e in n){
var i=r+n[e],s=e;
x.Hooks.registered[i]=[r,s]}
}
}
,getRoot:function(e){
var t=x.Hooks.registered[e];
return t?t[0]:e}
,cleanRootPropertyValue:function(e,t){
return x.RegEx.valueUnwrap.test(t)&&(t=t.match(x.RegEx.valueUnwrap)[1]),x.Values.isCSSNullValue(t)&&(t=x.Hooks.templates[e][1]),t}
,extractValue:function(e,t){
var r=x.Hooks.registered[e];
if(r){
var a=r[0],n=r[1];
return t=x.Hooks.cleanRootPropertyValue(a,t),t.toString().match(x.RegEx.valueSplit)[n]}
return t}
,injectValue:function(e,t,r){
var a=x.Hooks.registered[e];
if(a){
var n=a[0],o=a[1],i,s;
return r=x.Hooks.cleanRootPropertyValue(n,r),i=r.toString().match(x.RegEx.valueSplit),i[o]=t,s=i.join(" ")}
return r}
}
,Normalizations:{
registered:{
clip:function(e,t,r){
switch(e){
case"name":return"clip";
case"extract":var a;
return x.RegEx.wrappedValueAlreadyExtracted.test(r)?a=r:(a=r.toString().match(x.RegEx.valueUnwrap),a=a?a[1].replace(/,(\s+)?/g," "):r),a;
case"inject":return"rect("+r+")"}
}
,blur:function(e,t,r){
switch(e){
case"name":return"-webkit-filter";
case"extract":var a=parseFloat(r);
if(!a&&0!==a){
var n=r.toString().match(/blur\(([0-9]+[A-z]+)\)/i);
a=n?n[1]:0}
return a;
case"inject":return parseFloat(r)?"blur("+r+")":"none"}
}
,opacity:function(e,t,r){
if(8>=f)switch(e){
case"name":return"filter";
case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);
return r=a?a[1]/100:1;
case"inject":return t.style.zoom=1,parseFloat(r)>=1?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}
else switch(e){
case"name":return"opacity";
case"extract":return r;
case"inject":return r}
}
}
,register:function(){
9>=f||v.State.isGingerbread||(x.Lists.transformsBase=x.Lists.transformsBase.concat(x.Lists.transforms3D));
for(var e=0;
e<x.Lists.transformsBase.length;
e++)!function(){
var t=x.Lists.transformsBase[e];
x.Normalizations.registered[t]=function(e,r,n){
switch(e){
case"name":return"transform";
case"extract":return i(r)===a||i(r).transformCache[t]===a?/^scale/i.test(t)?1:0:i(r).transformCache[t].replace(/[()]/g,"");
case"inject":var o=!1;
switch(t.substr(0,t.length-1)){
case"translate":o=!/(%|px|em|rem|vw|vh|\d)$/i.test(n);
break;
case"scal":case"scale":v.State.isAndroid&&i(r).transformCache[t]===a&&1>n&&(n=1),o=!/(\d)$/i.test(n);
break;
case"skew":o=!/(deg|\d)$/i.test(n);
break;
case"rotate":o=!/(deg|\d)$/i.test(n)}
return o||(i(r).transformCache[t]="("+n+")"),i(r).transformCache[t]}
}
}
();
for(var e=0;
e<x.Lists.colors.length;
e++)!function(){
var t=x.Lists.colors[e];
x.Normalizations.registered[t]=function(e,r,n){
switch(e){
case"name":return t;
case"extract":var o;
if(x.RegEx.wrappedValueAlreadyExtracted.test(n))o=n;
else{
var i,s={
black:"rgb(0,0,0)",blue:"rgb(0,0,255)",gray:"rgb(128,128,128)",green:"rgb(0,128,0)",red:"rgb(255,0,0)",white:"rgb(255,255,255)"}
;
/^[A-z]+$/i.test(n)?i=s[n]!==a?s[n]:s.black:x.RegEx.isHex.test(n)?i="rgb("+x.Values.hexToRgb(n).join(" ")+")":/^rgba?\(/i.test(n)||(i=s.black),o=(i||n).toString().match(x.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," ")}
return 8>=f||3!==o.split(" ").length||(o+=" 1"),o;
case"inject":return 8>=f?4===n.split(" ").length&&(n=n.split(/\s+/).slice(0,3).join(" ")):3===n.split(" ").length&&(n+=" 1"),(8>=f?"rgb":"rgba")+"("+n.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")"}
}
}
()}
}
,Names:{
camelCase:function(e){
return e.replace(/-(\w)/g,function(e,t){
return t.toUpperCase()}
)}
,SVGAttribute:function(e){
var t="width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2";
return(f||v.State.isAndroid&&!v.State.isChrome)&&(t+="|transform"),new RegExp("^("+t+")$","i").test(e)}
,prefixCheck:function(e){
if(v.State.prefixMatches[e])return[v.State.prefixMatches[e],!0];
for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;
a>r;
r++){
var n;
if(n=0===r?e:t[r]+e.replace(/^\w/,function(e){
return e.toUpperCase()}
),g.isString(v.State.prefixElement.style[n]))return v.State.prefixMatches[e]=n,[n,!0]}
return[e,!1]}
}
,Values:{
hexToRgb:function(e){
var t=/^#?([a-f\d])([a-f\d])([a-f\d])$/i,r=/^#?([a-f\d]{
2}
)([a-f\d]{
2}
)([a-f\d]{
2}
)$/i,a;
return e=e.replace(t,function(e,t,r,a){
return t+t+r+r+a+a}
),a=r.exec(e),a?[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]:[0,0,0]}
,isCSSNullValue:function(e){
return 0==e||/^(none|auto|transparent|(rgba\(0,?0,?0,?0\)))$/i.test(e)}
,getUnitType:function(e){
return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(e)?"":"px"}
,getDisplayType:function(e){
var t=e&&e.tagName.toString().toLowerCase();
return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(t)?"inline":/^(li)$/i.test(t)?"list-item":/^(tr)$/i.test(t)?"table-row":"block"}
,addClass:function(e,t){
e.classList?e.classList.add(t):e.className+=(e.className.length?" ":"")+t}
,removeClass:function(e,t){
e.classList?e.classList.remove(t):e.className=e.className.toString().replace(new RegExp("(^|\\s)"+t.split(" ").join("|")+"(\\s|$)","gi")," ")}
}
,getPropertyValue:function(e,r,n,o){
function s(e,r){
function n(){
u&&x.setPropertyValue(e,"display","none")}
var l=0;
if(8>=f)l=$.css(e,r);
else{
var u=!1;
if(/^(width|height)$/.test(r)&&0===x.getPropertyValue(e,"display")&&(u=!0,x.setPropertyValue(e,"display",x.Values.getDisplayType(e))),!o){
if("height"===r&&"border-box"!==x.getPropertyValue(e,"boxSizing").toString().toLowerCase()){
var c=e.offsetHeight-(parseFloat(x.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(x.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(x.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(x.getPropertyValue(e,"paddingBottom"))||0);
return n(),c}
if("width"===r&&"border-box"!==x.getPropertyValue(e,"boxSizing").toString().toLowerCase()){
var p=e.offsetWidth-(parseFloat(x.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(x.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(x.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(x.getPropertyValue(e,"paddingRight"))||0);
return n(),p}
}
var d;
d=i(e)===a?t.getComputedStyle(e,null):i(e).computedStyle?i(e).computedStyle:i(e).computedStyle=t.getComputedStyle(e,null),(f||v.State.isFirefox)&&"borderColor"===r&&(r="borderTopColor"),l=9===f&&"filter"===r?d.getPropertyValue(r):d[r],(""===l||null===l)&&(l=e.style[r]),n()}
if("auto"===l&&/^(top|right|bottom|left)$/i.test(r)){
var g=s(e,"position");
("fixed"===g||"absolute"===g&&/top|left/i.test(r))&&(l=$(e).position()[r]+"px")}
return l}
var l;
if(x.Hooks.registered[r]){
var u=r,c=x.Hooks.getRoot(u);
n===a&&(n=x.getPropertyValue(e,x.Names.prefixCheck(c)[0])),x.Normalizations.registered[c]&&(n=x.Normalizations.registered[c]("extract",e,n)),l=x.Hooks.extractValue(u,n)}
else if(x.Normalizations.registered[r]){
var p,d;
p=x.Normalizations.registered[r]("name",e),"transform"!==p&&(d=s(e,x.Names.prefixCheck(p)[0]),x.Values.isCSSNullValue(d)&&x.Hooks.templates[r]&&(d=x.Hooks.templates[r][1])),l=x.Normalizations.registered[r]("extract",e,d)}
return/^[\d-]/.test(l)||(l=i(e)&&i(e).isSVG&&x.Names.SVGAttribute(r)?/^(height|width)$/i.test(r)?e.getBBox()[r]:e.getAttribute(r):s(e,x.Names.prefixCheck(r)[0])),x.Values.isCSSNullValue(l)&&(l=0),v.debug>=2&&console.log("Get "+r+":"+l),l}
,setPropertyValue:function(e,r,a,n,o){
var s=r;
if("scroll"===r)o.container?o.container["scroll"+o.direction]=a:"Left"===o.direction?t.scrollTo(a,o.alternateValue):t.scrollTo(o.alternateValue,a);
else if(x.Normalizations.registered[r]&&"transform"===x.Normalizations.registered[r]("name",e))x.Normalizations.registered[r]("inject",e,a),s="transform",a=i(e).transformCache[r];
else{
if(x.Hooks.registered[r]){
var l=r,u=x.Hooks.getRoot(r);
n=n||x.getPropertyValue(e,u),a=x.Hooks.injectValue(l,a,n),r=u}
if(x.Normalizations.registered[r]&&(a=x.Normalizations.registered[r]("inject",e,a),r=x.Normalizations.registered[r]("name",e)),s=x.Names.prefixCheck(r)[0],8>=f)try{
e.style[s]=a}
catch(c){
v.debug&&console.log("Browser does not support ["+a+"] for ["+s+"]")}
else i(e)&&i(e).isSVG&&x.Names.SVGAttribute(r)?e.setAttribute(r,a):e.style[s]=a;
v.debug>=2&&console.log("Set "+r+" ("+s+"):"+a)}
return[s,a]}
,flushTransformCache:function(e){
function t(t){
return parseFloat(x.getPropertyValue(e,t))}
var r="";
if((f||v.State.isAndroid&&!v.State.isChrome)&&i(e).isSVG){
var a={
translate:[t("translateX"),t("translateY")],skewX:[t("skewX")],skewY:[t("skewY")],scale:1!==t("scale")?[t("scale"),t("scale")]:[t("scaleX"),t("scaleY")],rotate:[t("rotateZ"),0,0]}
;
$.each(i(e).transformCache,function(e){
/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),a[e]&&(r+=e+"("+a[e].join(" ")+") ",delete a[e])}
)}
else{
var n,o;
$.each(i(e).transformCache,function(t){
return n=i(e).transformCache[t],"transformPerspective"===t?(o=n,!0):(9===f&&"rotateZ"===t&&(t="rotate"),void(r+=t+n+" "))}
),o&&(r="perspective"+o+" "+r)}
x.setPropertyValue(e,"transform",r)}
}
;
x.Hooks.register(),x.Normalizations.register(),v.hook=function(e,t,r){
var n=a;
return e=o(e),$.each(e,function(e,o){
if(i(o)===a&&v.init(o),r===a)n===a&&(n=v.CSS.getPropertyValue(o,t));
else{
var s=v.CSS.setPropertyValue(o,t,r);
"transform"===s[0]&&v.CSS.flushTransformCache(o),n=s}
}
),n}
;
var S=function(){
function e(){
return f?k.promise||null:d}
function s(){
function e(e){
function f(e,t){
var r=a,n=a,i=a;
return g.isArray(e)?(r=e[0],!g.isArray(e[1])&&/^[\d-]/.test(e[1])||g.isFunction(e[1])||x.RegEx.isHex.test(e[1])?i=e[1]:(g.isString(e[1])&&!x.RegEx.isHex.test(e[1])||g.isArray(e[1]))&&(n=t?e[1]:u(e[1],s.duration),e[2]!==a&&(i=e[2]))):r=e,t||(n=n||s.easing),g.isFunction(r)&&(r=r.call(o,V,w)),g.isFunction(i)&&(i=i.call(o,V,w)),[r||0,n,i]}
function d(e,t){
var r,a;
return a=(t||"0").toString().toLowerCase().replace(/[%A-z]+$/,function(e){
return r=e,""}
),r||(r=x.Values.getUnitType(e)),[a,r]}
function m(){
var e={
myParent:o.parentNode||r.body,position:x.getPropertyValue(o,"position"),fontSize:x.getPropertyValue(o,"fontSize")}
,a=e.position===L.lastPosition&&e.myParent===L.lastParent,n=e.fontSize===L.lastFontSize;
L.lastParent=e.myParent,L.lastPosition=e.position,L.lastFontSize=e.fontSize;
var s=100,l={
}
;
if(n&&a)l.emToPx=L.lastEmToPx,l.percentToPxWidth=L.lastPercentToPxWidth,l.percentToPxHeight=L.lastPercentToPxHeight;
else{
var u=i(o).isSVG?r.createElementNS("http://www.w3.org/2000/svg","rect"):r.createElement("div");
v.init(u),e.myParent.appendChild(u),$.each(["overflow","overflowX","overflowY"],function(e,t){
v.CSS.setPropertyValue(u,t,"hidden")}
),v.CSS.setPropertyValue(u,"position",e.position),v.CSS.setPropertyValue(u,"fontSize",e.fontSize),v.CSS.setPropertyValue(u,"boxSizing","content-box"),$.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,t){
v.CSS.setPropertyValue(u,t,s+"%")}
),v.CSS.setPropertyValue(u,"paddingLeft",s+"em"),l.percentToPxWidth=L.lastPercentToPxWidth=(parseFloat(x.getPropertyValue(u,"width",null,!0))||1)/s,l.percentToPxHeight=L.lastPercentToPxHeight=(parseFloat(x.getPropertyValue(u,"height",null,!0))||1)/s,l.emToPx=L.lastEmToPx=(parseFloat(x.getPropertyValue(u,"paddingLeft"))||1)/s,e.myParent.removeChild(u)}
return null===L.remToPx&&(L.remToPx=parseFloat(x.getPropertyValue(r.body,"fontSize"))||16),null===L.vwToPx&&(L.vwToPx=parseFloat(t.innerWidth)/100,L.vhToPx=parseFloat(t.innerHeight)/100),l.remToPx=L.remToPx,l.vwToPx=L.vwToPx,l.vhToPx=L.vhToPx,v.debug>=1&&console.log("Unit ratios:"+JSON.stringify(l),o),l}
if(s.begin&&0===V)try{
s.begin.call(h,h)}
catch(y){
setTimeout(function(){
throw y}
,1)}
if("scroll"===A){
var S=/^x$/i.test(s.axis)?"Left":"Top",C=parseFloat(s.offset)||0,T,F,E;
s.container?g.isWrapped(s.container)||g.isNode(s.container)?(s.container=s.container[0]||s.container,T=s.container["scroll"+S],E=T+$(o).position()[S.toLowerCase()]+C):s.container=null:(T=v.State.scrollAnchor[v.State["scrollProperty"+S]],F=v.State.scrollAnchor[v.State["scrollProperty"+("Left"===S?"Top":"Left")]],E=$(o).offset()[S.toLowerCase()]+C),l={
scroll:{
rootPropertyValue:!1,startValue:T,currentValue:T,endValue:E,unitType:"",easing:s.easing,scrollData:{
container:s.container,direction:S,alternateValue:F}
}
,element:o}
,v.debug&&console.log("tweensContainer (scroll):",l.scroll,o)}
else if("reverse"===A){
if(!i(o).tweensContainer)return void $.dequeue(o,s.queue);
"none"===i(o).opts.display&&(i(o).opts.display="auto"),"hidden"===i(o).opts.visibility&&(i(o).opts.visibility="visible"),i(o).opts.loop=!1,i(o).opts.begin=null,i(o).opts.complete=null,P.easing||delete s.easing,P.duration||delete s.duration,s=$.extend({
}
,i(o).opts,s);
var j=$.extend(!0,{
}
,i(o).tweensContainer);
for(var H in j)if("element"!==H){
var N=j[H].startValue;
j[H].startValue=j[H].currentValue=j[H].endValue,j[H].endValue=N,g.isEmptyObject(P)||(j[H].easing=s.easing),v.debug&&console.log("reverse tweensContainer ("+H+"):"+JSON.stringify(j[H]),o)}
l=j}
else if("start"===A){
var j;
i(o).tweensContainer&&i(o).isAnimating===!0&&(j=i(o).tweensContainer),$.each(b,function(e,t){
if(RegExp("^"+x.Lists.colors.join("$|^")+"$").test(e)){
var r=f(t,!0),n=r[0],o=r[1],i=r[2];
if(x.RegEx.isHex.test(n)){
for(var s=["Red","Green","Blue"],l=x.Values.hexToRgb(n),u=i?x.Values.hexToRgb(i):a,c=0;
c<s.length;
c++){
var p=[l[c]];
o&&p.push(o),u!==a&&p.push(u[c]),b[e+s[c]]=p}
delete b[e]}
}
}
);
for(var O in b){
var z=f(b[O]),q=z[0],M=z[1],I=z[2];
O=x.Names.camelCase(O);
var B=x.Hooks.getRoot(O),W=!1;
if(i(o).isSVG||x.Names.prefixCheck(B)[1]!==!1||x.Normalizations.registered[B]!==a){
(s.display!==a&&null!==s.display&&"none"!==s.display||s.visibility!==a&&"hidden"!==s.visibility)&&/opacity|filter/.test(O)&&!I&&0!==q&&(I=0),s._cacheValues&&j&&j[O]?(I===a&&(I=j[O].endValue+j[O].unitType),W=i(o).rootPropertyValueCache[B]):x.Hooks.registered[O]?I===a?(W=x.getPropertyValue(o,B),I=x.getPropertyValue(o,O,W)):W=x.Hooks.templates[B][1]:I===a&&(I=x.getPropertyValue(o,O));
var G,D,X,Y=!1;
if(G=d(O,I),I=G[0],X=G[1],G=d(O,q),q=G[0].replace(/^([+-\/*])=/,function(e,t){
return Y=t,""}
),D=G[1],I=parseFloat(I)||0,q=parseFloat(q)||0,"%"===D&&(/^(fontSize|lineHeight)$/.test(O)?(q/=100,D="em"):/^scale/.test(O)?(q/=100,D=""):/(Red|Green|Blue)$/i.test(O)&&(q=q/100*255,D="")),/[\/*]/.test(Y))D=X;
else if(X!==D&&0!==I)if(0===q)D=X;
else{
p=p||m();
var Q=/margin|padding|left|right|width|text|word|letter/i.test(O)||/X$/.test(O)||"x"===O?"x":"y";
switch(X){
case"%":I*="x"===Q?p.percentToPxWidth:p.percentToPxHeight;
break;
case"px":break;
default:I*=p[X+"ToPx"]}
switch(D){
case"%":I*=1/("x"===Q?p.percentToPxWidth:p.percentToPxHeight);
break;
case"px":break;
default:I*=1/p[D+"ToPx"]}
}
switch(Y){
case"+":q=I+q;
break;
case"-":q=I-q;
break;
case"*":q=I*q;
break;
case"/":q=I/q}
l[O]={
rootPropertyValue:W,startValue:I,currentValue:I,endValue:q,unitType:D,easing:M}
,v.debug&&console.log("tweensContainer ("+O+"):"+JSON.stringify(l[O]),o)}
else v.debug&&console.log("Skipping ["+B+"] due to a lack of browser support.")}
l.element=o}
l.element&&(x.Values.addClass(o,"velocity-animating"),R.push(l),""===s.queue&&(i(o).tweensContainer=l,i(o).opts=s),i(o).isAnimating=!0,V===w-1?(v.State.calls.length>1e4&&(v.State.calls=n(v.State.calls)),v.State.calls.push([R,h,s,null,k.resolver]),v.State.isTicking===!1&&(v.State.isTicking=!0,c())):V++)}
var o=this,s=$.extend({
}
,v.defaults,P),l={
}
,p;
switch(i(o)===a&&v.init(o),parseFloat(s.delay)&&s.queue!==!1&&$.queue(o,s.queue,function(e){
v.velocityQueueEntryFlag=!0,i(o).delayTimer={
setTimeout:setTimeout(e,parseFloat(s.delay)),next:e}
}
),s.duration.toString().toLowerCase()){
case"fast":s.duration=200;
break;
case"normal":s.duration=y;
break;
case"slow":s.duration=600;
break;
default:s.duration=parseFloat(s.duration)||1}
v.mock!==!1&&(v.mock===!0?s.duration=s.delay=1:(s.duration*=parseFloat(v.mock)||1,s.delay*=parseFloat(v.mock)||1)),s.easing=u(s.easing,s.duration),s.begin&&!g.isFunction(s.begin)&&(s.begin=null),s.progress&&!g.isFunction(s.progress)&&(s.progress=null),s.complete&&!g.isFunction(s.complete)&&(s.complete=null),s.display!==a&&null!==s.display&&(s.display=s.display.toString().toLowerCase(),"auto"===s.display&&(s.display=v.CSS.Values.getDisplayType(o))),s.visibility!==a&&null!==s.visibility&&(s.visibility=s.visibility.toString().toLowerCase()),s.mobileHA=s.mobileHA&&v.State.isMobile&&!v.State.isGingerbread,s.queue===!1?s.delay?setTimeout(e,s.delay):e():$.queue(o,s.queue,function(t,r){
return r===!0?(k.promise&&k.resolver(h),!0):(v.velocityQueueEntryFlag=!0,void e(t))}
),""!==s.queue&&"fx"!==s.queue||"inprogress"===$.queue(o)[0]||$.dequeue(o)}
var l=arguments[0]&&($.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||g.isString(arguments[0].properties)),f,d,m,h,b,P;
if(g.isWrapped(this)?(f=!1,m=0,h=this,d=this):(f=!0,m=1,h=l?arguments[0].elements:arguments[0]),h=o(h)){
l?(b=arguments[0].properties,P=arguments[0].options):(b=arguments[m],P=arguments[m+1]);
var w=h.length,V=0;
if("stop"!==b&&!$.isPlainObject(P)){
var C=m+1;
P={
}
;
for(var T=C;
T<arguments.length;
T++)g.isArray(arguments[T])||!/^(fast|normal|slow)$/i.test(arguments[T])&&!/^\d/.test(arguments[T])?g.isString(arguments[T])||g.isArray(arguments[T])?P.easing=arguments[T]:g.isFunction(arguments[T])&&(P.complete=arguments[T]):P.duration=arguments[T]}
var k={
promise:null,resolver:null,rejecter:null}
;
f&&v.Promise&&(k.promise=new v.Promise(function(e,t){
k.resolver=e,k.rejecter=t}
));
var A;
switch(b){
case"scroll":A="scroll";
break;
case"reverse":A="reverse";
break;
case"stop":$.each(h,function(e,t){
i(t)&&i(t).delayTimer&&(clearTimeout(i(t).delayTimer.setTimeout),i(t).delayTimer.next&&i(t).delayTimer.next(),delete i(t).delayTimer)}
);
var F=[];
return $.each(v.State.calls,function(e,t){
t&&$.each(t[1],function(r,n){
var o=g.isString(P)?P:"";
return P!==a&&t[2].queue!==o?!0:void $.each(h,function(t,r){
r===n&&(P!==a&&($.each($.queue(r,o),function(e,t){
g.isFunction(t)&&t(null,!0)}
),$.queue(r,o,[])),i(r)&&""===o&&$.each(i(r).tweensContainer,function(e,t){
t.endValue=t.currentValue}
),F.push(e))}
)}
)}
),$.each(F,function(e,t){
p(t,!0)}
),k.promise&&k.resolver(h),e();
default:if(!$.isPlainObject(b)||g.isEmptyObject(b)){
if(g.isString(b)&&v.Redirects[b]){
var E=$.extend({
}
,P),j=E.duration,H=E.delay||0;
return E.backwards===!0&&(h=$.extend(!0,[],h).reverse()),$.each(h,function(e,t){
parseFloat(E.stagger)?E.delay=H+parseFloat(E.stagger)*e:g.isFunction(E.stagger)&&(E.delay=H+E.stagger.call(t,e,w)),E.drag&&(E.duration=parseFloat(j)||(/^(callout|transition)/.test(b)?1e3:y),E.duration=Math.max(E.duration*(E.backwards?1-e/w:(e+1)/w),.75*E.duration,200)),v.Redirects[b].call(t,t,E||{
}
,e,w,h,k.promise?k:a)}
),e()}
var N="Velocity:First argument ("+b+") was not a property map,a known action,or a registered redirect. Aborting.";
return k.promise?k.rejecter(new Error(N)):console.log(N),e()}
A="start"}
var L={
lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPx:null,vwToPx:null,vhToPx:null}
,R=[];
$.each(h,function(e,t){
g.isNode(t)&&s.call(t)}
);
var E=$.extend({
}
,v.defaults,P),O;
if(E.loop=parseInt(E.loop),O=2*E.loop-1,E.loop)for(var z=0;
O>z;
z++){
var q={
delay:E.delay,progress:E.progress}
;
z===O-1&&(q.display=E.display,q.visibility=E.visibility,q.complete=E.complete),S(h,"reverse",q)}
return e()}
}
;
v=$.extend(S,v),v.animate=S;
var P=t.requestAnimationFrame||d;
return v.State.isMobile||r.hidden===a||r.addEventListener("visibilitychange",function(){
r.hidden?(P=function(e){
return setTimeout(function(){
e(!0)}
,16)}
,c()):P=t.requestAnimationFrame||d}
),e.Velocity=v,e!==t&&(e.fn.velocity=S,e.fn.velocity.defaults=v.defaults),$.each(["Down","Up"],function(e,t){
v.Redirects["slide"+t]=function(e,r,n,o,i,s){
var l=$.extend({
}
,r),u=l.begin,c=l.complete,p={
height:"",marginTop:"",marginBottom:"",paddingTop:"",paddingBottom:""}
,f={
}
;
l.display===a&&(l.display="Down"===t?"inline"===v.CSS.Values.getDisplayType(e)?"inline-block":"block":"none"),l.begin=function(){
u&&u.call(i,i);
for(var r in p){
f[r]=e.style[r];
var a=v.CSS.getPropertyValue(e,r);
p[r]="Down"===t?[a,0]:[0,a]}
f.overflow=e.style.overflow,e.style.overflow="hidden"}
,l.complete=function(){
for(var t in f)e.style[t]=f[t];
c&&c.call(i,i),s&&s.resolver(i)}
,v(e,p,l)}
}
),$.each(["In","Out"],function(e,t){
v.Redirects["fade"+t]=function(e,r,n,o,i,s){
var l=$.extend({
}
,r),u={
opacity:"In"===t?1:0}
,c=l.complete;
l.complete=n!==o-1?l.begin=null:function(){
c&&c.call(i,i),s&&s.resolver(i)}
,l.display===a&&(l.display="In"===t?"auto":"none"),v(this,u,l)}
}
),v}
(window.jQuery||window.Zepto||window,window,document)}
);
CSS代码(reset.css):
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
CSS代码(style.css):
/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*::after,*::before{content:'';}
body{font-size:100%;font-family:"PT Sans",sans-serif;color:#091d23;background-color:#ffb441;}
a{color:#1e6074;text-decoration:none;}
/* --------------------------------Main components-------------------------------- */
html,body{height:100%;}
header{z-index:3;}
.cd-logo,.cd-nav-trigger{position:fixed;display:inline-block;}
.cd-logo{top:28px;left:5%;}
.cd-logo img{display:block;}
.cd-nav-trigger{top:18px;right:5%;height:44px;width:44px;z-index:5;/* image replacement */
overflow:hidden;text-indent:100%;white-space:nowrap;}
.cd-nav-trigger .cd-icon{/* icon created in CSS */
position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);display:inline-block;width:18px;height:3px;background-color:#ffffff;z-index:10;}
.cd-nav-trigger .cd-icon::before,.cd-nav-trigger .cd-icon:after{/* upper and lower lines of the menu icon */
position:absolute;top:0;right:0;width:100%;height:100%;background-color:#ffffff;/* Force Hardware Acceleration in WebKit */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;/* apply transition to transform property */
-webkit-transition:-webkit-transform .3s;-moz-transition:-moz-transform .3s;transition:transform .3s;}
.cd-nav-trigger .cd-icon::before{-webkit-transform:translateY(-6px) rotate(0deg);-moz-transform:translateY(-6px) rotate(0deg);-ms-transform:translateY(-6px) rotate(0deg);-o-transform:translateY(-6px) rotate(0deg);transform:translateY(-6px) rotate(0deg);}
.cd-nav-trigger .cd-icon::after{-webkit-transform:translateY(6px) rotate(0deg);-moz-transform:translateY(6px) rotate(0deg);-ms-transform:translateY(6px) rotate(0deg);-o-transform:translateY(6px) rotate(0deg);transform:translateY(6px) rotate(0deg);}
.cd-nav-trigger::before,.cd-nav-trigger::after{/* 2 rounded colored backgrounds for the menu icon */
position:absolute;top:0;left:0;border-radius:50%;height:100%;width:100%;/* Force Hardware Acceleration in WebKit */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;transition-property:transform;}
.cd-nav-trigger::before{background-color:#091d23;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-delay:0.4s;-moz-transition-delay:0.4s;transition-delay:0.4s;}
.cd-nav-trigger::after{background-color:#ffb441;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition-duration:0s;-moz-transition-duration:0s;transition-duration:0s;-webkit-transition-delay:0s;-moz-transition-delay:0s;transition-delay:0s;}
.cd-nav-trigger.close-nav::before{/* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */
-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
.cd-nav-trigger.close-nav::after{/* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */
-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-delay:0.4s;-moz-transition-delay:0.4s;transition-delay:0.4s;}
.cd-nav-trigger.close-nav .cd-icon{/* user clicks on the .cd-nav-trigger element - transform the icon */
background-color:rgba(255,255,255,0);}
.cd-nav-trigger.close-nav .cd-icon::before,.cd-nav-trigger.close-nav .cd-icon::after{background-color:white;}
.cd-nav-trigger.close-nav .cd-icon::before{-webkit-transform:translateY(0) rotate(45deg);-moz-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);-o-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);}
.cd-nav-trigger.close-nav .cd-icon::after{-webkit-transform:translateY(0) rotate(-45deg);-moz-transform:translateY(0) rotate(-45deg);-ms-transform:translateY(0) rotate(-45deg);-o-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg);}
.cd-primary-nav{/* by default it's hidden */
position:fixed;left:0;top:0;height:100%;width:100%;padding:80px 5%;z-index:3;background-color:#091d23;overflow:auto;/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
-webkit-overflow-scrolling:touch;visibility:hidden;opacity:0;-webkit-transition:visibility 0s,opacity 0.3s;-moz-transition:visibility 0s,opacity 0.3s;transition:visibility 0s,opacity 0.3s;}
.cd-primary-nav li{margin:1.6em 0;text-align:center;text-transform:capitalize;}
.cd-primary-nav a{font-size:20px;font-size:1.25rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:color 0.2s;-moz-transition:color 0.2s;transition:color 0.2s;}
.no-touch .cd-primary-nav a:hover{color:#ffffff;}
.cd-primary-nav.fade-in{/* navigation visible at the end of the circle animation */
visibility:visible;opacity:1;}
@media only screen and (min-width:768px){.cd-primary-nav li{margin:2em 0;}
.cd-primary-nav a{font-size:28px;font-size:1.75rem;}
}
@media only screen and (min-width:1170px){.cd-primary-nav li{margin:2.6em 0;}
.cd-primary-nav a{font-size:32px;font-size:2rem;}
}
.cd-overlay-nav,.cd-overlay-content{/* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
position:fixed;top:18px;right:5%;height:4px;width:4px;-webkit-transform:translateX(-20px) translateY(20px);-moz-transform:translateX(-20px) translateY(20px);-ms-transform:translateX(-20px) translateY(20px);-o-transform:translateX(-20px) translateY(20px);transform:translateX(-20px) translateY(20px);}
.cd-overlay-nav span,.cd-overlay-content span{display:inline-block;position:absolute;border-radius:50%;/* Force Hardware Acceleration in WebKit */
-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
.cd-overlay-nav.is-hidden,.cd-overlay-content.is-hidden{/* background fades out at the end of the animation */
opacity:0;visibility:hidden;-webkit-transition:opacity .3s 0s,visibility 0s .3s;-moz-transition:opacity .3s 0s,visibility 0s .3s;transition:opacity .3s 0s,visibility 0s .3s;}
.cd-overlay-nav{/* main rounded colored bg 1 */
z-index:2;}
.cd-overlay-nav span{background-color:#091d23;}
.cd-overlay-content{/* main rounded colored bg 2 */
z-index:4;}
.cd-overlay-content span{background-color:#ffb441;}
.cd-content{/* just some dummy content */
padding:80px 0;width:90%;max-width:768px;margin:0 auto;z-index:1;}
.cd-content .cd-intro{height:200px;padding-top:4.6em;}
.cd-content h1{text-align:center;font-size:20px;font-size:1.25rem;}
.cd-content p{line-height:1.5;color:#a76500;}
@media only screen and (min-width:768px){.cd-content .cd-intro{height:100px;padding-top:2em;}
.cd-content h1{font-size:28px;font-size:1.75rem;}
.cd-content p{font-size:18px;font-size:1rem;line-height:1.4;}
}
分享到QQ
分享到微博
微信扫一扫
