以下是 jquery仿杂志翻页切换效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery仿杂志翻页切换效果</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.08464.js"></script>
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="${theClass}" style="${theStyle}">
<div class="front">
<div class="outer">
<div class="content" style="${theContentStyleFront}">
<div class="inner">{{html theContentFront}}</div>
</div>
</div>
</div>
<div class="back">
<div class="outer">
<div class="content" style="${theContentStyleBack}">
<div class="inner">{{html theContentBack}}</div>
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<header class="main-title">
<p>Swipe or drag to flip the pages, click to open items </p>
<p><strong>Best viewed in a Webkit browser (Safari, Chrome)</strong></p>
</header>
<div id="flip" class="container">
<div class="f-page f-cover">
<div class="cover-elements">
<div class="logo">
Pageflip
<a class="f-ref" href="#/">Images by NASA HQ Photo</a>
</div>
<h1>Spacy Flipping Pages with CSS3 & jQuery <span>Inspired by <a href="#/">Flipboard</a></span></h1>
<div class="f-cover-story"><span>Cover Story</span>Shuttle Enterprise Flight to New York</div>
</div>
<div class="f-cover-flip">< Flip</div>
</div>
<div class="f-page">
<div class="box w-25 h-70">
<div class="img-cont img-1"></div>
<h3>Japanese Prime Minister Noda with NASA Administrator Bolden <span>Published May 3, 2012</span></h3>
<p>Thundercats adipisicing marfa wes anderson farm-to-table, +1 vero yr ennui messenger bag occaecat williamsburg cosby sweater anim tattooed. Farm-to-table umami direct trade viral cosby sweater Austin. Magna tattooed irure, DIY do placeat helvetica sapiente laboris. Put a bird on it jean shorts wolf enim, viral authentic hoodie bespoke master cleanse proident. Ea pour-over swag wayfarers, Austin thundercats letterpress mollit 8-bit excepteur forage elit. Cupidatat minim dolore laborum whatever. Farm-to-table nihil tattooed, letterpress helvetica vegan semiotics pariatur pop-up. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-50 h-70 box-b-l box-b-r">
<div class="img-cont img-2"></div>
<h3>Shuttle Enterprise Flight to New York <span>Published May 3, 2012</span></h3>
<p>Art party cillum et cosby sweater aliquip wolf photo booth thundercats dreamcatcher pickled banksy. Sustainable ex kogi, mumblecore mlkshk occupy mcsweeney's freegan laboris nisi stumptown street art labore food truck. Stumptown pariatur 8-bit, iphone quis ethical pitchfork portland vegan. Irony esse gluten-free, id fanny pack umami commodo. Godard bushwick narwhal, quinoa biodiesel veniam jean shorts minim portland aesthetic excepteur sapiente. Fanny pack aesthetic post-ironic chambray esse. Bespoke nesciunt fugiat aute pariatur craft beer, laborum ex. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-25 h-70">
<div class="img-cont img-3"></div>
<h3>Expedition 30 Landing <span>Published May 3, 2012</span></h3>
<p>Single-origin coffee ex fingerstache keytar labore adipisicing, synth umami wolf jean shorts. Next level high life selvage cillum. Cupidatat before they sold out ex, shoreditch accusamus kogi consectetur delectus gluten-free. Keffiyeh seitan ex, trust fund fugiat gluten-free sunt put a bird on it pinterest. Vegan aesthetic vero, ethnic bespoke before they sold out williamsburg ennui 8-bit proident synth marfa mcsweeney's trust fund photo booth. Sed velit dolor, cardigan shoreditch typewriter ea. Dolore nihil occaecat high life post-ironic, ennui chillwave tattooed craft beer umami. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-50 h-30 box-b-r title-top">
<h3>NASA Begins Second Round of J-2X Testing <span>Published May 3, 2012</span></h3>
<p>Duis williamsburg irony proident vinyl. Irony stumptown magna nulla, nisi next level gentrify twee nostrud veniam retro tumblr forage. Gastropub wolf vegan hella, messenger bag next level keytar aliqua synth put a bird on it dolor exercitation iphone. Selvage tempor mollit kale chips carles. Ethnic irure master cleanse, carles non godard flexitarian. You probably haven't heard of them reprehenderit cillum ea post-ironic, delectus ut mlkshk chillwave sriracha single-origin coffee sunt. Dolore fixie do american apparel, kogi velit salvia VHS forage bespoke pariatur. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-50 h-30 title-top">
<h3>NASA's Webb Flight Backplane Completed <span>Published May 3, 2012</span></h3>
<p>Qui trust fund artisan, ullamco jean shorts craft beer ad forage. Kale chips scenester stumptown fugiat, magna nostrud aliqua. Chambray nihil gastropub 3 wolf moon food truck, cillum leggings. Mumblecore do iphone umami pork belly. Enim banh mi ut consequat, mixtape bushwick portland leggings sustainable officia nulla. Tattooed cillum ex, cray letterpress locavore marfa synth organic etsy minim williamsburg exercitation twee. Single-origin coffee cillum nulla polaroid ethical, fugiat incididunt. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
</div>
<div class="f-page">
<div class="box w-70 h-50 box-b-r title-top box-img-left">
<div class="img-cont img-4"></div>
<h3>Expedition 30 Astronaut back on Earth <span>Published May 3, 2012</span></h3>
<p>Consectetur locavore brooklyn dreamcatcher, aesthetic anim dolor put a bird on it semiotics godard pork belly forage. VHS veniam aliqua thundercats dolore keffiyeh, direct trade authentic PBR eiusmod. Dolore veniam fanny pack, proident iphone mixtape irure sed. Lo-fi leggings stumptown cardigan etsy, pitchfork echo park terry richardson next level labore proident. Messenger bag cillum squid scenester, before they sold out dolor nostrud ad bicycle rights. Ut ex bicycle rights, wes anderson thundercats duis synth gluten-free hoodie twee. Four loko artisan viral, letterpress dreamcatcher twee yr cray vegan enim photo booth 3 wolf moon. Id veniam mustache squid, cliche terry richardson organic quis dreamcatcher skateboard. Chambray before they sold out yr, iphone street art ut locavore squid placeat you probably haven't heard of them small batch. Cred proident occaecat wolf, fixie letterpress est biodiesel kogi gentrify. Artisan +1 culpa, bicycle rights trust fund direct trade consectetur gentrify synth pariatur twee delectus consequat wayfarers deserunt. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-30 h-50">
<div class="img-cont img-5"></div>
<h3>Space Shuttle Discovery Ready For Demate <span>Published May 3, 2012</span></h3>
<p>Ethical 3 wolf moon sartorial nihil consequat twee, officia banh mi scenester carles vero thundercats. Keffiyeh mlkshk cliche craft beer, sartorial bespoke flexitarian helvetica consequat. Echo park organic nihil nostrud brooklyn scenester, delectus bushwick est narwhal sriracha. Chambray terry richardson direct trade, tumblr keffiyeh semiotics minim post-ironic. Sapiente nostrud banksy in nisi, lo-fi kale chips polaroid retro. 8-bit you probably haven't heard of them bespoke cred portland trust fund yr dolore sed. Art party quis street art american apparel lomo. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-30 h-50 box-b-r title-top">
<h3>Black Hole Caught Red-Handed in a Stellar Homicide <span>Published May 3, 2012</span></h3>
<p>Salvia +1 pork belly cosby sweater, lo-fi wolf tattooed VHS. Before they sold out dolore cray flexitarian et VHS +1 trust fund. Typewriter squid fap aute wolf 3 wolf moon, vice cillum street art. Austin organic gluten-free, ex cosby sweater odio squid. Iphone high life sriracha, +1 cupidatat assumenda shoreditch exercitation wayfarers. Aesthetic selvage nesciunt ennui. Nisi anim single-origin coffee, ullamco bushwick delectus fanny pack marfa tumblr cliche. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-70 h-50 title-top box-img-left">
<div class="img-cont img-6"></div>
<h3>Space Station Trio Lands Safely In Kazakhstan <span>Published May 3, 2012</span></h3>
<p>Consectetur locavore brooklyn dreamcatcher, aesthetic anim dolor put a bird on it semiotics godard pork belly forage. VHS veniam aliqua thundercats dolore keffiyeh, direct trade authentic PBR eiusmod. Dolore veniam fanny pack, proident iphone mixtape irure sed. Lo-fi leggings stumptown cardigan etsy, pitchfork echo park terry richardson next level labore proident. Messenger bag cillum squid scenester, before they sold out dolor nostrud ad bicycle rights. Ut ex bicycle rights, wes anderson thundercats duis synth gluten-free hoodie twee. Four loko artisan viral, letterpress dreamcatcher twee yr cray vegan enim photo booth 3 wolf moon. Semiotics mlkshk anim sustainable butcher tempor. Odio single-origin coffee raw denim consequat mcsweeney's retro bespoke. Vero voluptate minim, letterpress accusamus twee farm-to-table pariatur cray. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
</div>
<div class="f-page">
<div class="box w-30 h-60 box-b-r title-top">
<h3>NASA Statement on John Glenn Selection for Medal of Freedom <span>Published May 3, 2012</span></h3>
<p>Accusamus yr gluten-free id. Ennui occupy scenester polaroid, incididunt VHS minim sustainable skateboard aute cillum retro. Odd future gluten-free excepteur retro, biodiesel jean shorts minim nisi. Mlkshk hoodie next level pop-up 8-bit. Butcher scenester aliqua, tumblr nisi mcsweeney's PBR pork belly bespoke keytar cillum laboris swag pitchfork. Fugiat et eu american apparel truffaut brooklyn minim. Incididunt quis pickled, chillwave +1 odio dolore freegan est pop-up before they sold out twee cliche echo park ut. In high life swag tofu ethnic 8-bit, seitan pinterest DIY lomo post-ironic. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-70 h-60 box-img-left title-top">
<div class="img-cont img-7"></div>
<h3>Legendary Astronaut Shannon Lucid Retires From NASA <span>Published May 3, 2012</span></h3>
<p>Wes anderson trust fund organic pour-over, aute authentic high life fanny pack enim. Ethnic mumblecore salvia, letterpress minim velit fugiat sartorial beard mixtape vice ad. Farm-to-table aute cred cosby sweater sed, dolore pork belly pinterest keytar 3 wolf moon mustache. Vice thundercats pour-over, lo-fi echo park accusamus ullamco adipisicing selvage street art you probably haven't heard of them etsy. Readymade bushwick mumblecore whatever aesthetic, do nesciunt direct trade proident culpa. Vegan you probably haven't heard of them hoodie adipisicing qui, voluptate Austin stumptown photo booth sed. Mixtape excepteur locavore eu, labore sustainable nisi tofu narwhal fanny pack VHS nulla aliqua. Beard velit street art aute sartorial. Sapiente pitchfork polaroid, fugiat ea DIY williamsburg forage officia sint occaecat. Gentrify exercitation cray marfa, blog biodiesel readymade aliquip beard placeat raw denim stumptown. Austin photo booth accusamus et semiotics. Messenger bag ethical direct trade ullamco jean shorts. Selvage authentic seitan direct trade delectus butcher, mollit occupy cillum photo booth banksy proident gentrify commodo vice. Retro qui cray whatever. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-40 h-40 box-img-left box-b-r title-top">
<div class="img-cont img-8"></div>
<h3>Coverage Set For Next Soyuz Space Station Crew Rotation <span>Published May 3, 2012</span></h3>
<p>Mcsweeney's pitchfork chambray tattooed four loko, commodo nesciunt lo-fi dreamcatcher mixtape eu occaecat vinyl cupidatat. Delectus selvage gentrify, commodo fingerstache jean shorts sriracha you probably haven't heard of them aesthetic. Bespoke nulla eiusmod deserunt, qui 8-bit +1 high life proident dolor small batch accusamus laborum ethical. In high life swag tofu ethnic 8-bit, seitan pinterest DIY lomo post-ironic. American apparel fingerstache portland, lomo thundercats small batch velit quis letterpress. Dolore iphone accusamus pitchfork authentic. Qui narwhal voluptate, street art keffiyeh non laborum. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-30 h-40 box-b-r title-top">
<h3>Shuttle Enterprise to Fly Over New York City Metro Area April 23 <span>Published May 3, 2012</span></h3>
<p>Authentic put a bird on it mustache magna. Terry richardson dolor vero, magna odio synth letterpress umami brunch vice craft beer Austin. Velit mcsweeney's consequat wes anderson. Yr eu minim id. Pinterest odio keytar, irony bushwick pickled delectus placeat 3 wolf moon trust fund. Small batch mixtape carles chambray aute pop-up reprehenderit, portland magna skateboard vero dreamcatcher. Id artisan twee tempor excepteur pitchfork. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
<div class="box w-30 h-40 title-top">
<h3>Top Scientist and Technologist Discuss What's Next for NASA <span>Published May 3, 2012</span></h3>
<p>Nisi anim raw denim, occupy seitan magna selvage pork belly leggings gluten-free. Street art consequat aliquip, echo park helvetica enim pariatur fanny pack aesthetic et laboris pickled jean shorts ethical. Austin pop-up next level esse, retro quinoa locavore mollit etsy elit nesciunt quis salvia beard. Quis magna consequat selvage, ullamco commodo exercitation. VHS polaroid fugiat quis gastropub, cosby sweater aliquip aesthetic velit jean shorts swag. Put a bird on it etsy pork belly synth nisi, pitchfork wes anderson semiotics cliche ea. Cliche officia cosby sweater ullamco, quis stumptown est blog vinyl pork belly. Helvetica ex godard selvage, sriracha echo park ut portland forage cardigan. Retro readymade williamsburg cliche laboris pinterest. Mollit aliqua direct trade, tumblr vegan lo-fi shoreditch semiotics sed 8-bit. Incididunt keffiyeh PBR cray, assumenda yr butcher nisi. Mustache brunch kogi, farm-to-table small batch odio fugiat consequat fap esse quinoa. Iphone banh mi brunch jean shorts sartorial, letterpress culpa direct trade master cleanse banksy fap whatever quinoa biodiesel. Portland eiusmod minim nihil Austin, sartorial aesthetic occupy tofu sriracha pitchfork seitan.</p>
</div>
</div>
<div class="f-page f-cover-back">
<div id="codrops-ad-wrapper">
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var $container = $( '#flip' ),
$pages = $container.children().hide();
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
if( url === 'css/fallback.css' ) {
$pages.show();
}
else if( url === 'js/jquery.flips.js' ) {
$container.flips();
}
}
});
</script>
</body>
</html>
JS代码(core.string.js):
/** * @depends nothing * @name core.string * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
*/
/** * Return a new string with any spaces trimmed the left and right of the string * @version 1.0.0 * @date June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.trim = String.prototype.trim || function(){
// Trim off any whitespace from the front and backreturn this.replace(/^\s+|\s+$/g,'');
}
;
/** * Return a new string with the value stripped from the left and right of the string * @version 1.1.1 * @date July 22,2010 * @since 1.0.0,June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.strip = String.prototype.strip || function(value,regex){
// Strip a value from left and right,with optional regex support (defaults to false)value = String(value);
var str = this;
if ( value.length ){
if ( !(regex||false) ){
// We must escape value as we do not want regex supportvalue = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g,'\\$1');
}
str = str.replace(eval('/^'+value+'+|'+value+'+$/g'),'');
}
return String(str);
}
/** * Return a new string with the value stripped from the left of the string * @version 1.1.1 * @date July 22,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.stripLeft = String.prototype.stripLeft || function(value,regex){
// Strip a value from the left,with optional regex support (defaults to false)value = String(value);
var str = this;
if ( value.length ){
if ( !(regex||false) ){
// We must escape value as we do not want regex supportvalue = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g,'\\$1');
}
str = str.replace(eval('/^'+value+'+/g'),'');
}
return String(str);
}
/** * Return a new string with the value stripped from the right of the string * @version 1.1.1 * @date July 22,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.stripRight = String.prototype.stripRight || function(value,regex){
// Strip a value from the right,with optional regex support (defaults to false)value = String(value);
var str = this;
if ( value.length ){
if ( !(regex||false) ){
// We must escape value as we do not want regex supportvalue = value.replace(/([\[\]\(\)\^\$\.\?\|\/\\])/g,'\\$1');
}
str = str.replace(eval('/'+value+'+$/g'),'');
}
return String(str);
}
/** * Return a int of the string * @version 1.0.0 * @date June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.toInt = String.prototype.toInt || function(){
// Convert to a Integerreturn parseInt(this,10);
}
;
/** * Return a new string of the old string wrapped with the start and end values * @version 1.0.0 * @date June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.wrap = String.prototype.wrap || function(start,end){
// Wrap the stringreturn start+this+end;
}
;
/** * Return a new string of a selection of the old string wrapped with the start and end values * @version 1.0.0 * @date June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.wrapSelection = String.prototype.wrapSelection || function(start,end,a,z){
// Wrap the selectionif ( typeof a === 'undefined' || a === null ) a = this.length;
if ( typeof z === 'undefined' || z === null ) z = this.length;
return this.substring(0,a)+start+this.substring(a,z)+end+this.substring(z);
}
;
/** * Return a new string of the slug of the old string * @version 1.1.0 * @date July 16,2010 * @since 1.0.0,June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.toSlug = String.prototype.toSlug || function(){
// Convert a string to a slugreturn this.toLowerCase().replace(/[\s_]/g,'-').replace(/[^-a-z0-9]/g,'').replace(/--+/g,'-').replace(/^-+|-+$/g,'');
}
/** * Return a new JSON object of the old string. * Turns:*file.js?a=1&
b.c=3.0&b.d=four&a_false_value=false&a_null_value=null * Into:*{
"a":1,"b":{
"c":3,"d":"four"}
,"a_false_value":false,"a_null_value":null}
* @version 1.1.0 * @date July 16,2010 * @since 1.0.0,June 30,2010 * @package jquery-sparkle{
@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton{
@link http://www.balupton.com}
* @copyright (c) 2009-2010 Benjamin Arthur Lupton{
@link http://www.balupton.com}
* @license GNU Affero General Public License version 3{
@link http://www.gnu.org/licenses/agpl-3.0.html}
*/
String.prototype.queryStringToJSON = String.prototype.queryStringToJSON || function ( ){
// Turns a params string or url into an array of params// Preparevar params = String(this);
// Remove url if need beparams = params.substring(params.indexOf('?')+1);
// params = params.substring(params.indexOf('#')+1);
// Change + to %20,the %20 is fixed up later with the decodeparams = params.replace(/\+/g,'%20');
// Do we have JSON stringif ( params.substring(0,1) === '{
' && params.substring(params.length-1) === '}
' ){
// We have a JSON stringreturn eval(decodeURIComponent(params));
}
// We have a params stringparams = params.split(/\&(amp\;
)?/);
var json ={
}
;
// We have paramsfor ( var i = 0,n = params.length;
i < n;
++i ){
// Adjustvar param = params[i] || null;
if ( param === null ){
continue;
}
param = param.split('=');
if ( param === null ){
continue;
}
// ^ We now have "var=blah" into ["var","blah"]// Getvar key = param[0] || null;
if ( key === null ){
continue;
}
if ( typeof param[1] === 'undefined' ){
continue;
}
var value = param[1];
// ^ We now have the parts// Fixkey = decodeURIComponent(key);
value = decodeURIComponent(value);
try{
// value can be converted value = eval(value);
}
catch ( e ){
// value is a normal string}
// Set// window.console.log({
'key':key,'value':value}
,split);
var keys = key.split('.');
if ( keys.length === 1 ){
// Simplejson[key] = value;
}
else{
// Advanced (Recreating an object)var path = '',cmd = '';
// Ensure Path Exists$.each(keys,function(ii,key){
path += '["'+key.replace(/"/g,'\\"')+'"]';
jsonCLOSUREGLOBAL = json;
// we have made this a global as closure compiler struggles with evalscmd = 'if ( typeof jsonCLOSUREGLOBAL'+path+' === "undefined" ) jsonCLOSUREGLOBAL'+path+' ={
}
';
eval(cmd);
json = jsonCLOSUREGLOBAL;
delete jsonCLOSUREGLOBAL;
}
);
// Apply ValuejsonCLOSUREGLOBAL = json;
// we have made this a global as closure compiler struggles with evalsvalueCLOSUREGLOBAL = value;
// we have made this a global as closure compiler struggles with evalscmd = 'jsonCLOSUREGLOBAL'+path+' = valueCLOSUREGLOBAL';
eval(cmd);
json = jsonCLOSUREGLOBAL;
delete jsonCLOSUREGLOBAL;
delete valueCLOSUREGLOBAL;
}
// ^ We now have the parts added to your JSON object}
return json;
}
;
JS代码(jquery.tmpl.min.js):
(function(a){
var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{
\{
\! /,b={
}
,f={
}
,e,p={
key:0,data:{
}
}
,h=0,c=0,l=[];
function g(e,d,g,i){
var c={
data:i||(d?d.data:{
}
),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t}
;
e&&a.extend(c,e,{
nodes:[],parent:d}
);
if(g){
c.tmpl=g;
c._ctnt=c._ctnt||c.tmpl(a,c);
c.key=++h;
(l.length?f:b)[h]=c}
return c}
a.each({
appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"}
,function(f,d){
a.fn[f]=function(n){
var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;
e=b||{
}
;
if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){
i[d](this[0]);
g=this}
else{
for(h=0,m=i.length;
h<m;
h++){
c=h;
k=(h>0?this.clone(true):this).get();
a.fn[d].apply(a(i[h]),k);
g=g.concat(k)}
c=0;
g=this.pushStack(g,f,i.selector)}
l=e;
e=null;
a.tmpl.complete(l);
return g}
}
);
a.fn.extend({
tmpl:function(d,c,b){
return a.tmpl(this[0],d,c,b)}
,tmplItem:function(){
return a.tmplItem(this[0])}
,template:function(b){
return a.template(b,this[0])}
,domManip:function(d,l,j){
if(d[0]&&d[0].nodeType){
var f=a.makeArray(arguments),g=d.length,i=0,h;
while(i<g&&!(h=a.data(d[i++],"tmplItem")));
if(g>1)f[0]=[a.makeArray(d)];
if(h&&c)f[2]=function(b){
a.tmpl.afterManip(this,b,j)}
;
r.apply(this,f)}
else r.apply(this,arguments);
c=0;
!e&&a.tmpl.complete(b);
return this}
}
);
a.extend({
tmpl:function(d,h,e,c){
var j,k=!c;
if(k){
c=p;
d=a.template[d]||a.template(null,d);
f={
}
}
else if(!d){
d=c.tmpl;
b[c.key]=c;
c.nodes=[];
c.wrapped&&n(c,c.wrapped);
return a(i(c,null,c.tmpl(a,c)))}
if(!d)return[];
if(typeof h==="function")h=h.call(c||{
}
);
e&&e.wrapped&&n(e,e.wrapped);
j=a.isArray(h)?a.map(h,function(a){
return a?g(e,c,d,a):null}
):[g(e,c,d,h)];
return k?a(i(c,null,j)):j}
,tmplItem:function(b){
var c;
if(b instanceof a)b=b[0];
while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));
return c||p}
,template:function(c,b){
if(b){
if(typeof b==="string")b=o(b);
else if(b instanceof a)b=b[0]||{
}
;
if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));
return typeof c==="string"?(a.template[c]=b):b}
return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null}
,encode:function(a){
return(""+a).split("<").join("<
").split(">").join(">
").split('"').join(""
").split("'").join("'
")}
}
);
a.extend(a.tmpl,{
tag:{
tmpl:{
_default:{
$2:"null"}
,open:"if($notnull_1){
_=_.concat($item.nest($1,$2));
}
"}
,wrap:{
_default:{
$2:"null"}
,open:"$item.calls(_,$1,$2);
_=[];
",close:"call=$item.calls();
_=call._.concat($item.wrap(call,_));
"}
,each:{
_default:{
$2:"$index,$value"}
,open:"if($notnull_1){
$.each($1a,function($2){
with(this){
",close:"}
}
);
}
"}
,"if":{
open:"if(($notnull_1) && $1a){
",close:"}
"}
,"else":{
_default:{
$1:"true"}
,open:"}
else if(($notnull_1) && $1a){
"}
,html:{
open:"if($notnull_1){
_.push($1a);
}
"}
,"=":{
_default:{
$1:"$data"}
,open:"if($notnull_1){
_.push($.encode($1a));
}
"}
,"!":{
open:""}
}
,complete:function(){
b={
}
}
,afterManip:function(f,b,d){
var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];
d.call(f,b);
m(e);
c++}
}
);
function i(e,g,f){
var b,c=f?a.map(f,function(a){
return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}
):e;
if(g)return c;
c=c.join("");
c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){
b=a(e).get();
m(b);
if(c)b=j(c).concat(b);
if(d)b=b.concat(j(d))}
);
return b?b:j(c)}
function j(c){
var b=document.createElement("div");
b.innerHTML=c;
return a.makeArray(b.childNodes)}
function o(b){
return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;
with($data){
_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{
([^\}
]*)\}
/g,"{
{
= $1}
}
").replace(/\{
\{
(\/?)(\w+|.)(?:\(((?:[^\}
]|\}
(?!\}
))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}
]|\}
(?!\}
))*?)\))?\s*\}
\}
/g,function(m,l,j,d,b,c,e){
var i=a.tmpl.tag[j],h,f,g;
if(!i)throw"Template command not found:"+j;
h=i._default||[];
if(c&&!/\w$/.test(b)){
b+=c;
c=""}
if(b){
b=k(b);
e=e?","+k(e)+")":c?")":"";
f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;
g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}
else g=f=h.$1||"null";
d=k(d);
return"');
"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){
a=a?","+a+")":b?")":"";
return a?"("+c+").call($item"+a:d}
):h.$2||"")+"_.push('"}
)+"');
}
return _;
")}
function n(c,b){
c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}
function k(a){
return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}
function s(b){
var a=document.createElement("div");
a.appendChild(b.cloneNode(true));
return a.innerHTML}
function m(o){
var n="_"+c,k,j,l={
}
,e,p,i;
for(e=0,p=o.length;
e<p;
e++){
if((k=o[e]).nodeType!==1)continue;
j=k.getElementsByTagName("*");
for(i=j.length-1;
i>=0;
i--)m(j[i]);
m(k)}
function m(j){
var p,i=j,k,e,m;
if(m=j.getAttribute(d)){
while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));
if(p!==m){
i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;
if(!(e=b[m])){
e=f[m];
e=g(e,b[i]||f[i],null,true);
e.key=++h;
b[h]=e}
c&&o(m)}
j.removeAttribute(d)}
else if(c&&(e=a.data(j,"tmplItem"))){
o(e.key);
b[e.key]=e;
i=a.data(j.parentNode,"tmplItem");
i=i?i.key:0}
if(e){
k=e;
while(k&&k.key!=i){
k.nodes.push(j);
k=k.parent}
delete e._ctnt;
delete e._wrap;
a.data(j,"tmplItem",e)}
function o(a){
a=a+n;
e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}
}
}
function u(a,d,c,b){
if(!a)return l.pop();
l.push({
_:a,tmpl:d,item:this,data:c,options:b}
)}
function w(d,c,b){
return a.tmpl(a.template(d),c,b,this)}
function x(b,d){
var c=b.options||{
}
;
c.wrapped=d;
return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}
function v(d,c){
var b=this._wrap;
return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){
return c?a.innerText||a.textContent:a.outerHTML||s(a)}
)}
function t(){
var b=this.nodes;
a.tmpl(null,null,null,this).insertBefore(b[0]);
a(b).remove()}
}
)(jQuery)CSS代码(demo.css):
/* @import url('normalize.css');*/
/* General Demo Style */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{font-family:'Open Sans Condensed','Arial Narrow',serif;background:#ddd url(../images/fabric_plaid.png) repeat top left;font-weight:400;font-size:15px;color:#333;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased;margin:0;overflow:hidden;}
a{color:#555;text-decoration:none;}
.clr{clear:both;padding:0;height:0;margin:0;}
.main-title{position:absolute;z-index:-1;width:50%;padding:20px 40px;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.main-title h1{font-size:45px;line-height:52px;font-weight:300;color:#777;}
.main-title h1 strong{font-weight:700;}
.main-title p{font-size:18px;color:#F86738;}
CSS代码(fallback.css):
.no-csstransforms3d body{overflow:auto;}
.no-csstransforms3d .f-page.f-cover,.no-csstransforms3d .f-page.f-cover-back{display:none !important;}
.no-csstransforms3d .f-title{position:relative;}
.no-csstransforms3d .main-title{position:relative;width:100%;}
.no-csstransforms3d .box{width:auto;float:none;height:auto;margin:20px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);cursor:auto;}
.no-csstransforms3d .box:after,.no-csstransforms3d .box-img-left:after,.no-csstransforms3d .box-img-right:after{display:none;}
.no-csstransforms3d .box .img-cont,.no-csstransforms3d .box-img-left .img-cont,.no-csstransforms3d .box-img-right .img-cont{width:300px;height:200px;float:left;margin:10px 20px 20px 0;}
.no-csstransforms3d .box-img-left p{margin-left:0px}
.no-csstransforms3d .box-img-right p{margin-right:0px}
CSS代码(style.css):
.container{position:relative;margin:0 auto;-webkit-perspective:2200px;-moz-perspective:2200px;perspective:2200px;}
.page{width:50%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-transform-origin:left center;-moz-transform-origin:left center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.page > div{display:block;height:100%;width:100%;position:absolute;background:#fff;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;}
.page .back{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);}
.page .outer{width:100%;height:100%;position:absolute;top:0px;left:0px;overflow:hidden;z-index:999;}
.page .content{height:100%;position:absolute;top:0px;left:0px;}
.overlay,.flipoverlay{background-color:rgba(0,0,0,0.6);position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0;}
.flipoverlay{background-color:rgba(0,0,0,0.2);}
.page .content .inner{padding:50px 15px 10px;height:100%;}
.page h1{text-align:center;}
.page.cover .front .content,.page.cover-back .back .content{width:100% !important;}
.page.cover .front .content:after,.page.cover-back .back .content:after{position:absolute;top:0px;left:0px;width:10px;height:100%;content:'';background:-webkit-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.01) 16%,rgba(0,0,0,0) 17%,rgba(0,0,0,0) 44%,rgba(0,0,0,0.08) 60%,rgba(0,0,0,0.09) 61%,rgba(0,0,0,0.35) 100%);opacity:0.2;}
.page.cover-back .back .content:after{left:auto;right:0px;background:-webkit-linear-gradient(left,rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.1) 10%,rgba(0,0,0,1) 100%);}
.page.cover .front .content .inner{padding-top:20px;}
.page.cover .front .content{background:#ddd url(../images/cover.jpg) no-repeat center center;background-size:cover;}
.page.cover-back .back .content{background:#B0D5FF;}
.page.cover h1{color:rgba(255,255,255,0.9);text-align:right;font-weight:300;font-size:34px;text-transform:uppercase;margin:0 0 0 60%;line-height:34px;padding-bottom:10px;cursor:default;}
.page.cover h1 span{display:block;font-weight:300;font-size:15px;}
.page.cover .f-cover-story{color:rgba(255,255,255,0.9);font-weight:600;font-size:50px;line-height:46px;position:absolute;bottom:60px;left:40px;margin:0;text-transform:uppercase;cursor:default;}
a.f-ref{line-height:20px;font-size:16px;position:absolute;top:252px;font-weight:300;text-indent:1px;}
.page.cover .f-cover-story span{display:block;font-size:26px;line-height:26px;}
.page a,.page.cover .f-cover-story span{color:#F86738;}
.page a:hover{color:#000;}
.f-cover-flip{background:#000;color:#ddd;position:absolute;right:0px;padding:5px 30px 5px 20px;font-size:30px;text-transform:uppercase;font-weight:500;top:50%;margin-top:-25px;cursor:default;}
.logo{width:180px;height:180px;position:absolute;top:20px;left:30px;line-height:428px;color:white;font-size:59px;font-weight:bold;text-indent:-3px;cursor:default;}
.logo:before{position:absolute;width:49%;height:50%;content:'';top:0px;left:0px;background:rgba(255,255,255,0.4);box-shadow:0 95px 0px rgba(255,255,255,0.6);}
.logo:after{position:absolute;width:49%;height:50%;content:'';top:0px;right:0px;background:rgba(255,255,255,0.6);box-shadow:0 95px 0px rgba(255,255,255,0.4);}
.f-title{position:absolute;top:0px;left:0px;height:50px;text-align:center;width:100%;}
.f-title h2{line-height:50px;margin:0;font-weight:300;font-size:28px;color:#aaa;float:left;width:33%;}
.f-title a{width:33%;float:left;text-align:right;overflow:hidden;height:50px;font-size:12px;line-height:50px;padding:0px 15px;color:#777;font-style:italic;font-family:"Calisto MT","Bookman Old Style",Bookman,"Goudy Old Style",Garamond,"Hoefler Text","Bitstream Charter",Georgia,serif;}
.f-title a:first-child{text-align:left;}
.f-title a:hover{color:#000;}
.box{border-top:1px solid #f2f2f2;float:left;padding:20px;overflow:hidden;position:relative;background:#fff;cursor:pointer;}
.img-cont{height:40%;width:100%;background-repeat:no-repeat;background-position:top center;background-size:cover;}
.img-1{background-image:url(../images/1.jpg);}
.img-2{background-image:url(../images/2.jpg);height:60%;}
.img-3{background-image:url(../images/3.jpg);}
.img-4{background-image:url(../images/4.jpg);}
.img-5{background-image:url(../images/5.jpg);}
.img-6{background-image:url(../images/6.jpg);}
.img-7{background-image:url(../images/7.jpg);}
.img-8{background-image:url(../images/8.jpg);}
.img-9{background-image:url(../images/9.jpg);}
.box h3{padding:10px 0px;margin:0;font-size:18px;}
.box h3 span{display:block;font-size:11px;font-weight:300;text-transform:uppercase;letter-spacing:2px;color:#74726f;}
.box:after{position:absolute;background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(22%,rgba(255,255,255,0.73)),color-stop(23%,rgba(255,255,255,0.73)),color-stop(91%,rgba(255,255,255,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);background:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);background:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);background:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 22%,rgba(255,255,255,0.73) 23%,rgba(255,255,255,1) 91%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',endColorstr='#ffffff',GradientType=0 );height:50px;bottom:0px;left:0px;right:0px;content:'';}
.box p{margin:0;padding:0;text-align:justify;font-family:Georgia;font-size:13px;line-height:20px;display:block;position:relative;padding-bottom:30px;}
.w-25{width:25%;}
.w-30{width:30%;}
.w-40{width:40%;}
.w-50{width:50%;}
.w-60{width:60%;}
.w-70{width:70%;}
.w-75{width:75%;}
.w-100{width:100%;}
.h-25{height:25%;}
.h-30{height:30%;}
.h-40{height:40%;}
.h-50{height:50%;}
.h-60{height:60%;}
.h-70{height:70%;}
.h-75{height:75%;}
.h-100{height:100%;}
.box-expanded.box-img-left .img-cont,.box-img-left .img-cont{float:left;width:40%;height:100%;margin-right:2%;}
.box-img-left:after{left:42%;}
.box-img-left p{margin-left:42%;}
.box-img-right .img-cont{float:right;width:40%;height:100%;margin-left:2%;}
.box-img-right:after{right:42%;}
.box-img-right p{margin-right:42%;}
.title-top h3{padding-top:0px;}
.box-b-r{border-right:1px solid #f2f2f2;}
.box-b-l{border-left:1px solid #f2f2f2;}
.box-expanded{border:none;padding:50px;}
.box-expanded .img-cont{box-shadow:1px 1px 2px rgba(0,0,0,0.1);float:left;width:50%;height:50%;margin-right:20px;box-shadow:1px 1px 2px rgba(0,0,0,0.1);}
.box.box-expanded h3{font-size:50px;line-height:50px;padding-top:0px;}
.box.box-expanded h3 span{font-size:14px;}
.box.box-expanded p{font-size:20px;line-height:30px;}
.box.box-expanded:after{background:transparent;}
.box-expanded .box-close{position:absolute;top:0px;right:20px;width:80px;height:30px;background:#000;color:#fff;font-weight:bold;font-size:16px;text-align:center;line-height:30px;}
@media screen and (max-width:760px){.f-title a{height:30px;line-height:14px;margin-top:10px;}
.f-title h2{font-size:18px;line-height:18px;margin-top:5px;}
}
@media screen and (max-width:690px){.page .box{width:100%;height:20%;padding:5px;border:none;border-top:1px solid #ddd;}
.page .box h3{font-size:16px;}
.page .box h3 span,.page .box .img-cont,.page .box p,.page .box:after{display:none;}
.box.box-expanded h3{font-size:26px;line-height:30px;padding-top:15px;clear:both;}
.box.box-expanded p{font-size:16px;line-height:22px;}
.box-img-left p,.box-img-right p{margin:0;}
.box.box-expanded h3 span{font-size:12px;}
body .box-expanded{padding:40px 20px 20px;}
body .box-expanded .img-cont{width:100% !important;height:50% !important;margin:0;}
.cover-elements{display:none;}
}
分享到QQ
分享到微博
微信扫一扫
