以下是 VM Carousel响应式图片切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VM Carousel响应式图片切换代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" type="text/css" href="dist/jquery.vm-carousel.css">
<script src="js/modernizr.js"></script>
<style type="text/css">
h2 {
margin-bottom: 40px;
margin-top: 40px;
}
.vmc-centered{ padding: 10px 0; }
.vmc-centered img { transition: all 0.3s ease; }
.vmc-centered .vmc_active img { transform: scale(1.2); }
</style>
</head>
<body>
<div class="container">
<h2>VM Carousel</h2>
<h3>Centered mode, initial slide index: 2</h3>
<ul class="vmcarousel-centered vmc-centered">
<li><img src="images/1.jpg" alt="" width="200"></li>
<li><img src="images/2.jpg" alt="" width="200"></li>
<li><img src="images/3.jpg" alt="" width="200"></li>
<li><img src="images/4.jpg" alt="" width="200"></li>
<li><img src="images/5.jpg" alt="" width="200"></li>
<li><img src="images/6.jpg" alt="" width="200"></li>
</ul>
<h3>Centered infinite mode, initial slide index: 1</h3>
<ul class="vmcarousel-centered-infitine vmc-centered">
<li><img src="images/1.jpg" alt="" width="200"></li>
<li><img src="images/2.jpg" alt="" width="200"></li>
<li><img src="images/3.jpg" alt="" width="200"></li>
<li><img src="images/4.jpg" alt="" width="200"></li>
<li><img src="images/5.jpg" alt="" width="200"></li>
<li><img src="images/6.jpg" alt="" width="200"></li>
</ul>
<h3>Normal mode</h3>
<ul class="vmcarousel-normal">
<li><img src="images/1.jpg" alt="" width="200"></li>
<li><img src="images/2.jpg" alt="" width="200"></li>
<li><img src="images/3.jpg" alt="" width="200"></li>
<li><img src="images/4.jpg" alt="" width="200"></li>
<li><img src="images/5.jpg" alt="" width="200"></li>
<li><img src="images/6.jpg" alt="" width="200"></li>
</ul>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="dist/jquery.vm-carousel.js"></script>
<script type="text/javascript">
jQuery(function($){
$('.vmcarousel-centered').vmcarousel({
centered: true,
start_item: 2,
autoplay: false,
infinite: false
});
$('.vmcarousel-centered-infitine').vmcarousel({
centered: true,
start_item: 1,
autoplay: false,
infinite: true
});
$('.vmcarousel-normal').vmcarousel({
centered: false,
start_item: 0,
autoplay: false,
infinite: false
});
});
</script>
</body>
</html>
JS代码(jquery.vm-carousel.js):
/* ========================================================================= *\vmcarousel plugin by Vedmant\* ========================================================================= */
(function ($,window,document,undefined){
"use strict";
var pluginName = 'vmcarousel';
/** * Defaults * * @type{
}
*/
var defaults ={
delay:4000,speed:500,autoplay:true,items_to_show:0,// 0 for auto calcmin_items_to_show:2,items_to_slide:1,dont_cut:true,centered:false,start_item:0,start_item_centered:false,infinite:false,changed_slide:$.noop()}
;
/** * Plugin constructor * * @param element * @param options * @constructor */
function Plugin(element,options){
this._name = pluginName;
this.element = element;
this.$element = $(element);
var data_options = parse_data_options(this.$element.data('options'));
this.options = $.extend({
}
,defaults,options);
this.options = $.extend({
}
,this.options,data_options);
this.init();
}
/** * Parse data-options attribute options * * @param data_options_raw * @returns{
Array}
*/
function parse_data_options(data_options_raw){
if(data_options_raw === undefined) return [];
var options = [];
data_options_raw.split(';
').forEach(function(el){
var pair = el.split(':');
if(pair.length == 2) options[pair[0].trim()] = pair[1].trim();
}
);
return options;
}
/** * Plugin functions */
Plugin.prototype ={
/** * Plugin init */
init:function (){
var that = this;
// Add classthis.$element.addClass('vmcarousel');
// Wrapthis.$viewport = this.$element.wrap('<div class="vmc-viewport"></div>').parent();
this.$container = this.$viewport.wrap('<div class="vmc-container"></div>').parent();
// Some initial procedures with slidesthis.init_slides();
// Items varsthis.$orig_items = this.$element.find('>li');
this.$items = this.$orig_items;
this.orig_items_count = this.$orig_items.length;
this.items_count = this.$items.length;
this.orig_item_width = this.$items.outerWidth(true);
this.item_width = this.orig_item_width;
// Other varsthis.current_position = 0;
// Init functionsthis.calc_variables();
this.init_infinite(this.options.start_item);
this.init_controls();
this.update_state();
// Reorder slides to make start item at the centerif(this.options.start_item_centered)this.reorder_to_center(this.options.start_item);
// Initial set slideif( ! this.options.infinite)this.set_slide(this.options.start_item);
elsethis.set_active_infinite(this.options.start_item);
// Start timerif (this.options.autoplay) this.start_timer();
// Window resize event$(window).resize(function (){
that.resize()}
);
}
,/** * Calculate all needed variables */
calc_variables:function(){
this.viewport_width = this.$viewport.width();
// Calc items to showthis.items_to_show = this.options.items_to_show;
if( ! this.options.items_to_show || (this.orig_item_width * this.items_to_show) > this.viewport_width){
this.items_to_show = Math.floor(this.viewport_width / this.orig_item_width);
}
// Set odd number for centered type for not to cut itemsif(this.options.centered && this.options.dont_cut){
this.items_to_show = this.items_to_show % 2 ? this.items_to_show:this.items_to_show - 1;
}
// Min items to showif(this.items_to_show < this.options.min_items_to_show) this.items_to_show = this.options.min_items_to_show;
// Calc item width for centered or dont_cutif(this.options.centered || this.options.dont_cut){
this.item_width = Math.floor(this.viewport_width / this.items_to_show);
if(this.item_width < this.orig_item_width) this.item_width = this.orig_item_width;
this.$items.width(this.item_width);
this.full_items_width = this.item_width * this.items_count;
this.$element.css({
width:this.full_items_width + 'px'}
);
}
// Calc items to slidethis.items_to_slide = this.options.items_to_slide;
if( ! this.options.items_to_slide)this.items_to_slide = Math.floor(this.viewport_width / this.item_width);
if(this.items_to_slide > this.items_to_show) this.items_to_slide = this.items_to_show;
if(this.items_to_slide <= 0) this.items_to_slide = 1;
this.hide_controls = this.items_count <= this.items_to_show;
this.infinite_initial_margin = - this.item_width;
if(this.items_to_show % 2 == 0) this.infinite_initial_margin += this.item_width / 2;
}
,/** * Update carousel state (clases,so on) */
update_state:function(){
this.$element.css({
transition:'transform ' + this.options.speed / 1000 + 's'}
);
if(this.hide_controls) this.$container.addClass('hide-controls');
else this.$container.removeClass('hide-controls');
}
,/** * Set slides properties */
init_slides:function(){
this.$element.find('>li').each(function(i){
$(this).attr('data-slide',i);
}
);
}
,/** * Init controls */
init_controls:function(){
var that = this;
// Controlsthis.$btn_left = this.$container.append('<a href="" class="vmc-arrow-left"></a>').find('.vmc-arrow-left');
this.$btn_right = this.$container.append('<a href="" class="vmc-arrow-right"></a>').find('.vmc-arrow-right');
// Bind controlsthis.$btn_left.click(function (e){
e.preventDefault();
that.slide_relative(-1);
}
);
this.$btn_right.click(function (e){
e.preventDefault();
that.slide_relative(1);
}
);
}
,/** * Reorder slider to place item at the center * * @param position */
reorder_to_center:function(position){
// Dont reorder if 2 or less itemsif(this.orig_items_count < 3) return;
// Calc shift times and directionvar shift_count = Math.floor(this.orig_items_count / 2) - position;
var dir = shift_count > 0 ? -1:1;
// Shift itemsshift_count = Math.abs(shift_count);
for(var i = 0;
i < shift_count;
i++) this.switch_slides(dir);
}
,/** * Move to exact slide * * @param slide */
set_slide:function(slide){
var position = this.$element.find('>[data-slide="'+slide+'"]').index();
this.slide_relative(position);
}
,/** * Slide n items forth or back * * @param offset */
slide_relative:function (offset){
if(this.options.centered && this.options.infinite)this.slide_relative_centered_infinite(offset);
else if(this.options.centered)this.slide_relative_centered(offset);
elsethis.slide_relative_left(offset);
}
,/** * Slide n items forth or back for left mode * * @param offset */
slide_relative_left:function (offset){
var new_position = this.current_position + (offset * this.items_to_slide);
// If now is ribbon tail on go back reverse to slide_count stepif (this.current_position == this.items_count && offset < 0){
new_position = (Math.floor(this.items_count / this.items_to_slide) + offset) * this.items_to_slide;
// Show ribbon tail (last slide to right border)}
else if (new_position < 0 || (this.items_to_slide > (this.items_count - new_position) && new_position < this.items_count)){
new_position = this.items_count - this.items_to_show;
// Scroll to beggining}
else if (new_position > (this.items_count - this.items_to_show)){
new_position = 0;
}
var margin_left = - this.item_width * new_position;
// Animate slidethis.animate_slide(margin_left);
this.change_slide(new_position,new_position);
}
,/** * Slide n items forth or back for centered mode * * @param offset */
slide_relative_centered:function (offset){
var new_position = this.current_position + (offset * this.items_to_slide);
if (new_position < 0){
new_position = this.items_count - 1;
// Scroll to beggining}
else if (new_position >= this.items_count){
new_position = 0;
}
var margin_left = this.viewport_width / 2 - (this.item_width * (new_position + 1) - this.item_width / 2);
// Animate slidethis.animate_slide(margin_left);
var new_active_slide = this.$items.eq(new_position).attr('data-slide');
this.change_slide(new_position,new_active_slide);
}
,/** * Init infinite carousel feature */
init_infinite:function (start_item){
if( ! this.options.infinite) return;
this.make_clones();
this.calc_variables();
this.$element.css("margin-left",this.infinite_initial_margin + "px");
}
,/** * Make clones for infinite carousel */
make_clones:function (){
var times = 1;
if(this.items_count < this.items_to_show)times = Math.ceil(this.items_to_show / this.items_count);
for(var i = 0;
i < times;
i++){
this.$element.prepend(this.$orig_items.clone().addClass('vmc-clone'));
}
this.$items = this.$element.find('>li');
this.items_count = this.$items.length;
}
,/** * Slide n items forth or back for centered mode with infinite mode * * @param offset */
slide_relative_centered_infinite:function (offset){
var that = this;
// Only one item to slideoffset = offset < 0 ? -1:1;
var margin_left = this.infinite_initial_margin - this.item_width * offset;
//if(this.items_to_show % 2 == 0) margin_left += this.item_width / 2;
var new_position = Math.ceil(this.items_to_show / 2) + offset;
var new_active_slide = this.$items.eq(new_position).attr('data-slide');
this.animate_slide(margin_left,function(e){
that.switch_slides(offset);
that.$element.css("margin-left",that.infinite_initial_margin + "px");
}
,'margin');
this.change_slide(new_position,new_active_slide);
}
,/** * Place first slide at the end or last slide before first * * @param dir */
switch_slides:function(dir){
var that = this;
// Switch last or first itemif(dir > 0){
that.$items.last().after(that.$items.first());
}
else{
that.$items.first().before(that.$items.last());
}
// Reload elementsthat.$items = that.$element.find('>li');
}
,/** * Set first active slide for infinite carousel * */
set_active_infinite:function(position){
var center_position = Math.ceil(this.items_to_show / 2);
for(var i = 0;
i < this.orig_items_count;
i++){
this.switch_slides(1);
if(this.$items.eq(center_position).attr('data-slide') == position){
this.$items.eq(center_position).addClass('vmc_active');
return true;
}
}
return false;
}
,/** * Change slide * * @param new_position * @param margin_left */
change_slide:function (new_position,new_active_slide){
var that = this;
// Update current positionthis.current_position = new_position;
// Add active classthis.$items.removeClass('vmc_active').eq(this.current_position).addClass('vmc_active');
// Restart timerif (this.options.autoplay) this.start_timer();
// Call callbackif (typeof this.options.changed_slide === "function"){
this.options.changed_slide.call(this,new_active_slide);
}
}
,/** * Slide animation * * @param margin_left */
animate_slide:function (margin_left,complete,type){
var that = this;
if(type == undefined) type = 'css3';
if(complete == undefined) complete = $.noop();
if (Modernizr.csstransitions && type == 'css3'){
this.$element.css("transform","translate3d(" + margin_left + "px,0px,0px)");
this.$element.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',complete);
}
else{
this.$element.stop(true).animate({
'margin-left':margin_left + 'px'}
,this.options.speed,'swing',complete);
}
}
,/** * Resize event */
resize:function (){
this.calc_variables();
this.update_state();
// Update slider positionthis.slide_relative(0);
}
,/** * Start timer */
start_timer:function (){
var that = this;
if (this.timer_id != 0) clearTimeout(this.timer_id);
this.timer_id = setTimeout(function (){
that.slide_relative(1);
}
,this.options.delay);
}
,/** * Stop timer */
stop_timer:function (){
clearTimeout(this.timer_id);
this.timer_id = 0;
}
}
// Plugin.prototype/** * Attach to Jquery * * @param options * @returns{
*}
*/
$.fn[pluginName] = function (options){
var args = [].slice.call(arguments,1);
return this.each(function (){
if (!$.data(this,'plugin_' + pluginName))$.data(this,'plugin_' + pluginName,new Plugin(this,options));
else if ($.isFunction(Plugin.prototype[options]))$.data(this,'plugin_' + pluginName)[options].apply($.data(this,'plugin_' + pluginName),args);
}
);
}
// Auto init for tags with data-vmcarousel attribute$('[data-vmcarousel]').vmcarousel();
}
)(jQuery,window,document);
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);
CSS代码(jquery.vm-carousel.css):
/* ========================================================================= *\ vmcarousel plugin\* ========================================================================= */
.vmc-container{position:relative;}
.vmc-viewport{overflow:hidden;}
.vmcarousel{list-style-type:none;padding:0;margin:0;width:1000%;}
.vmcarousel:after{content:'';display:table;clear:both;}
.vmcarousel > li{float:left;}
.vmcarousel > li img{display:block;margin:0 auto;max-width:100%;}
.vmc-container.hide-controls .vmc-arrow-left,.vmc-container.hide-controls .vmc-arrow-right{display:none;}
.vmc-arrow-left,.vmc-arrow-right{position:absolute;top:50%;left:-15px;width:50px;height:50px;margin-top:-25px;overflow:hidden;opacity:0;border-radius:50%;transition:opacity 0.3s ease;text-align:center;}
.vmc-arrow-right{left:auto;right:-15px;}
.vmc-container:hover .vmc-arrow-left,.vmc-container:hover .vmc-arrow-right{opacity:1;}
.vmc-arrow-left:after,.vmc-arrow-right:after{content:'';display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;font-size:50px;line-height:50px;color:white;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:2px 2px #000;}
.vmc-arrow-left:hover:after,.vmc-arrow-right:hover:after{color:white;}
.vmc-arrow-left:after{content:"\e079";}
.vmc-arrow-right:after{content:"\e080";}
.vmc-container img[src$=".svg"]{width:100% !important;height:auto !important;max-height:100%;}
.notransition{-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;-ms-transition:none !important;transition:none !important;}
CSS代码(zzsc.css):
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
